(feat): add tooltips

(fix): small ui and layout bug

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

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