(feat): add tooltips

(fix): small ui and layout bug

packages/call/src/components/buttons/mute.tsx

@@ -1,17 +1,21 @@
-import { Button } from "@tensamin/ui";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@tensamin/ui";
 import { toggleMute, useCall } from "../../store";
 import { Mic, MicOff } from "lucide-react";
 
 export default function MuteButton({
   className,
   iconSize,
+  tooltip,
+  portalContainer,
 }: {
   className?: string;
   iconSize?: number;
+  tooltip?: string;
+  portalContainer?: HTMLElement;
 }) {
   const micEnabled = useCall((state) => state.micEnabled);
 
-  return (
+  const button = (
     <Button
       variant={micEnabled ? "default" : "destructive"}
       className={className}
@@ -24,4 +28,17 @@ export default function MuteButton({
       )}
     </Button>
   );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger render={button} />
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  );
 }