(feat): add tooltips

(fix): small ui and layout bug

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

@@ -1,17 +1,21 @@
 import { LeaveIcon } from "@livekit/components-react";
-import { Button } from "@tensamin/ui";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@tensamin/ui";
 import { disconnect, useCall } from "../../store";
 
 export default function LeaveButton({
   className,
   iconSize,
+  tooltip,
+  portalContainer,
 }: {
   className?: string;
   iconSize?: number;
+  tooltip?: string;
+  portalContainer?: HTMLElement;
 }) {
   const state = useCall((store) => store.state);
 
-  return (
+  const button = (
     <Button
       className={className}
       onClick={() => disconnect()}
@@ -21,4 +25,17 @@ export default function LeaveButton({
       <LeaveIcon style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }} />
     </Button>
   );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger render={button} />
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  );
 }