fix: add tooltip to playground share button

Author: joshunrau

apps/playground/src/components/Header/ShareButton/ShareButton.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Button, Heading, Input, Popover } from '@douglasneuroinformatics/libui/components';
+import { Heading, Input, Popover, Tooltip } from '@douglasneuroinformatics/libui/components';
 import { CopyButton } from '@opendatacapture/react-core';
 import { Share2Icon } from 'lucide-react';
 
@@ -14,6 +14,7 @@ export const ShareButton = () => {
   const editorFilesRef = useFilesRef();
   const [shareURL, setShareURL] = useState(encodeShareURL({ files: editorFilesRef.current, label }));
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
 
   // The user cannot modify the editor without closing the popover
   useEffect(() => {
@@ -23,25 +24,38 @@ export const ShareButton = () => {
   }, [isPopoverOpen, label]);
 
   return (
-    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-      <Popover.Trigger asChild>
-        <Button className="h-9 w-9" size="icon" variant="outline">
-          <Share2Icon />
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align="end" className="w-[520px] p-4">
-        <div className="flex flex-col space-y-2 text-center sm:text-left">
-          <Heading variant="h5">Share Instrument</Heading>
-          <p className="text-muted-foreground text-sm">
-            Anyone with this link can open a snapshot of the current code in your playground. The total size of the
-            URL-encoded source files for this instrument is {formatSize(shareURL.size)}.
-          </p>
-        </div>
-        <div className="flex gap-2 pt-4">
-          <Input readOnly className="h-9" id="link" value={shareURL.href} />
-          <CopyButton size="sm" text={shareURL.href} />
-        </div>
-      </Popover.Content>
-    </Popover>
+    <Tooltip
+      delayDuration={700}
+      open={isTooltipOpen}
+      onOpenChange={(open) => {
+        if (!isPopoverOpen) {
+          setIsTooltipOpen(open);
+        }
+      }}
+    >
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <Popover.Trigger asChild>
+          <Tooltip.Trigger className="h-9 w-9" size="icon" variant="outline">
+            <Share2Icon />
+          </Tooltip.Trigger>
+        </Popover.Trigger>
+        <Popover.Content align="end" className="w-[520px] p-4">
+          <div className="flex flex-col space-y-2 text-center sm:text-left">
+            <Heading variant="h5">Share Instrument</Heading>
+            <p className="text-muted-foreground text-sm">
+              Anyone with this link can open a snapshot of the current code in your playground. The total size of the
+              URL-encoded source files for this instrument is {formatSize(shareURL.size)}.
+            </p>
+          </div>
+          <div className="flex gap-2 pt-4">
+            <Input readOnly className="h-9" id="link" value={shareURL.href} />
+            <CopyButton size="sm" text={shareURL.href} />
+          </div>
+        </Popover.Content>
+        <Tooltip.Content side="bottom">
+          <p>Share</p>
+        </Tooltip.Content>
+      </Popover>
+    </Tooltip>
   );
 };