fix: add tooltip to clone button

Author: joshunrau

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Button, Dialog, Form } from '@douglasneuroinformatics/libui/components';
+import { Dialog, Form, Tooltip } from '@douglasneuroinformatics/libui/components';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
 import { CopyPlusIcon } from 'lucide-react';
 import { z } from 'zod';
@@ -33,41 +33,46 @@ export const CloneButton = () => {
   };
 
   return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <Dialog.Trigger asChild>
-        <Button className="h-9 w-9" size="icon" variant="outline">
-          <CopyPlusIcon />
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Content className="sm:max-w-[475px]">
-        <Dialog.Header>
-          <Dialog.Title>Create New Instrument</Dialog.Title>
-          <Dialog.Description>
-            This will save the current playground state in local storage as a new instrument.
-          </Dialog.Description>
-        </Dialog.Header>
-        <Form
-          className="[&_button]:max-w-32"
-          content={{
-            label: {
-              kind: 'string',
-              label: 'Label',
-              variant: 'input'
-            }
-          }}
-          submitBtnLabel="Save"
-          validationSchema={z.object({
-            label: z
-              .string()
-              .min(1)
-              .refine(
-                (arg) => !instruments.find((instrument) => instrument.label === arg),
-                'An instrument with this label already exists'
-              )
-          })}
-          onSubmit={(data) => void handleSubmit(data)}
-        />
-      </Dialog.Content>
-    </Dialog>
+    <Tooltip>
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <Dialog.Trigger asChild>
+          <Tooltip.Trigger className="h-9 w-9" size="icon" variant="outline">
+            <CopyPlusIcon />
+          </Tooltip.Trigger>
+        </Dialog.Trigger>
+        <Dialog.Content className="sm:max-w-[475px]">
+          <Dialog.Header>
+            <Dialog.Title>Create New Instrument</Dialog.Title>
+            <Dialog.Description>
+              This will save the current playground state in local storage as a new instrument.
+            </Dialog.Description>
+          </Dialog.Header>
+          <Form
+            className="[&_button]:max-w-32"
+            content={{
+              label: {
+                kind: 'string',
+                label: 'Label',
+                variant: 'input'
+              }
+            }}
+            submitBtnLabel="Save"
+            validationSchema={z.object({
+              label: z
+                .string()
+                .min(1)
+                .refine(
+                  (arg) => !instruments.find((instrument) => instrument.label === arg),
+                  'An instrument with this label already exists'
+                )
+            })}
+            onSubmit={(data) => void handleSubmit(data)}
+          />
+        </Dialog.Content>
+      </Dialog>
+      <Tooltip.Content side="bottom">
+        <p>Create New Instrument</p>
+      </Tooltip.Content>
+    </Tooltip>
   );
 };

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

@@ -25,7 +25,6 @@ export const ShareButton = () => {
 
   return (
     <Tooltip
-      delayDuration={700}
       open={isTooltipOpen}
       onOpenChange={(open) => {
         if (!isPopoverOpen) {
@@ -52,10 +51,10 @@ export const ShareButton = () => {
             <CopyButton size="sm" text={shareURL.href} />
           </div>
         </Popover.Content>
-        <Tooltip.Content side="bottom">
-          <p>Share</p>
-        </Tooltip.Content>
       </Popover>
+      <Tooltip.Content side="bottom">
+        <p>Share</p>
+      </Tooltip.Content>
     </Tooltip>
   );
 };