fix the delay behavior of tooltips

toolkit/chakra/tooltip.tsx

@@ -35,14 +35,30 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       lazyMount = true,
       unmountOnExit = true,
       triggerProps,
-      closeDelay,
+      closeDelay = 100,
+      openDelay = 100,
+      interactive,
       ...rest
     } = props;
 
     const [ open, setOpen ] = React.useState<boolean>(defaultOpen);
+    const timeoutRef = React.useRef<number | null>(null);
 
     const isMobile = useIsMobile();
-    const triggerRef = useClickAway<HTMLButtonElement>(() => setOpen(false));
+
+    const handleClickAway = React.useCallback((event: Event) => {
+      if (interactive) {
+        const closest = (event.target as HTMLElement)?.closest('.chakra-tooltip__positioner');
+        if (closest) {
+          return;
+        }
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        setOpen(false);
+      }, closeDelay);
+    }, [ closeDelay, interactive ]);
+    const triggerRef = useClickAway<HTMLButtonElement>(handleClickAway);
 
     const handleOpenChange = React.useCallback((details: { open: boolean }) => {
       setOpen(details.open);
@@ -50,8 +66,25 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     }, [ onOpenChange ]);
 
     const handleTriggerClick = React.useCallback(() => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(() => {
         setOpen((prev) => !prev);
-    }, [ ]);
+      }, open ? closeDelay : openDelay);
+    }, [ open, openDelay, closeDelay ]);
+
+    const handleContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+    }, []);
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
 
     if (disabled || (disableOnMobile && isMobile)) return children;
 
@@ -69,22 +102,23 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 
     return (
       <ChakraTooltip.Root
-        openDelay={ 100 }
+        openDelay={ openDelay }
         // FIXME: chakra closes tooltip too fast, so Playwright is not able to make a screenshot of its content
         // so we need to increase the close delay in Playwright environment
-        closeDelay={ config.app.isPw ? 10_000 : closeDelay ?? 100 }
+        closeDelay={ config.app.isPw ? 10_000 : closeDelay }
         open={ open }
         onOpenChange={ handleOpenChange }
         closeOnClick={ false }
-        closeOnPointerDown={ true }
+        closeOnPointerDown={ false }
         variant={ variant }
         lazyMount={ lazyMount }
         unmountOnExit={ unmountOnExit }
+        interactive={ interactive }
         { ...rest }
         positioning={ positioning }
       >
         <ChakraTooltip.Trigger
-          ref={ triggerRef }
+          ref={ open ? triggerRef : null }
           asChild
           onClick={ isMobile ? handleTriggerClick : undefined }
           { ...triggerProps }
@@ -95,6 +129,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
           <ChakraTooltip.Positioner>
             <ChakraTooltip.Content
               ref={ ref }
+              onClick={ interactive ? handleContentClick : undefined }
               { ...(selected ? { 'data-selected': true } : {}) }
               { ...contentProps }
             >

ui/shared/gas/GasInfoTooltip.tsx

@@ -11,7 +11,6 @@ import type { ExcludeUndefined } from 'types/utils';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import { SECOND } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import type { TooltipProps } from 'toolkit/chakra/tooltip';
@@ -71,7 +70,6 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, placement }: Props) =>
       interactive
       showArrow={ false }
       contentProps={{ p: 4, borderRadius: 'md' }}
-      closeDelay={ SECOND }
     >
       { children }
     </Tooltip>

ui/showcases/Tooltip.tsx

@@ -15,7 +15,7 @@ const TooltipShowcase = () => {
             <Tooltip content="Tooltip content">
               <span>Default</span>
             </Tooltip>
-            <Tooltip content="Tooltip content">
+            <Tooltip content="Tooltip content" interactive>
               <Utilization value={ 0.5 }/>
             </Tooltip>
           </Sample>