Merge pull request #45 from getpingback/fix/onChange-tooltip

Fix/on change tooltip
getpingback · Dec 3, 2024 · 594deba · 594deba
2 parents 1085db0 + 1f461b1
commit 594deba
Showing 1 changed file with 8 additions and 24 deletions.
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -3,48 +3,32 @@ import { InfoCircleIcon } from '@stash-ui/light-icons';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from '@/lib/utils';
 
-export interface TooltipProps
-  extends React.ComponentProps<typeof TooltipPrimitive.Content> {
+export interface TooltipProps extends React.ComponentProps<typeof TooltipPrimitive.Content> {
   children: React.ReactNode;
   className?: string;
   sideOffset?: number;
   trigger?: JSX.Element;
   showArrow?: boolean;
 }
-function Tooltip({
-  className,
-  sideOffset = 4,
-  trigger,
-  showArrow,
-  ...props
-}: TooltipProps) {
+function Tooltip({ className, sideOffset = 4, trigger, showArrow, ...props }: TooltipProps) {
+  const [open, setOpen] = React.useState(false);
   return (
     <TooltipPrimitive.Provider delayDuration={200}>
-      <TooltipPrimitive.Root delayDuration={200}>
-        <TooltipPrimitive.Trigger asChild>
-          {trigger ? (
-            trigger
-          ) : (
-            <InfoCircleIcon
-              width={16}
-              height={16}
-              data-testid='tooltip-trigger'
-            />
-          )}
+      <TooltipPrimitive.Root delayDuration={200} onOpenChange={setOpen} open={open}>
+        <TooltipPrimitive.Trigger asChild onClick={() => setOpen(!open)}>
+          {trigger ? trigger : <InfoCircleIcon width={16} height={16} data-testid="tooltip-trigger" />}
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Content
           sideOffset={sideOffset}
-          data-testid='tooltip-content'
+          data-testid="tooltip-content"
           className={cn(
             'z-50 overflow-hidden max-w-[260px] font-light opacity-90 rounded-lg bg-[#000000] text-[#FFFFFF] text-center pl-[10px] pr-[12px] py-[8px] text-xs',
             className
           )}
           {...props}
         >
           {props.children}
-          {showArrow ? (
-            <TooltipPrimitive.Arrow className='fill-[#000000]' />
-          ) : null}
+          {showArrow ? <TooltipPrimitive.Arrow className="fill-[#000000]" /> : null}
         </TooltipPrimitive.Content>
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>