fix(TooltipV2): delay tooltip opening time by 50ms (#5350)

* fix(TooltipV2): delay tooltip opening time by ms

* Create five-mayflies-flash.md

* fix(Overlay): use fire event for click in test and set popover to false when non-matching element

* fix(Overlay): remove redundant await

* fix(TooltipV2): use safeTimeout

* fix(TooltipV2): change type of timeoutRef

Author: francinelucca

.changeset/five-mayflies-flash.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(TooltipV2): delay tooltip opening time by ms

packages/react/src/Overlay/Overlay.test.tsx

@@ -128,7 +128,7 @@ describe('Overlay', () => {
     expect(container.getByText('Add to list')).toBeInTheDocument()
 
     // open second menu
-    await user.click(container.getByText('Create list'))
+    fireEvent.click(container.getByText('Create list'))
     expect(container.getByPlaceholderText('Name this list')).toBeInTheDocument()
 
     // hitting escape on input should close the second menu but not the first

packages/react/src/TooltipV2/Tooltip.tsx

@@ -15,6 +15,7 @@ import classes from './Tooltip.module.css'
 import {useFeatureFlag} from '../FeatureFlags'
 import {KeybindingHint, type KeybindingHintProps} from '../KeybindingHint'
 import VisuallyHidden from '../_VisuallyHidden'
+import useSafeTimeout from '../hooks/useSafeTimeout'
 
 const CSS_MODULE_FEATURE_FLAG = 'primer_react_css_modules_team'
 
@@ -213,6 +214,10 @@ export const Tooltip = React.forwardRef(
 
     const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
+    const timeoutRef = React.useRef<number | null>(null)
+
+    const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
+
     const openTooltip = () => {
       try {
         if (
@@ -265,6 +270,8 @@ export const Tooltip = React.forwardRef(
         ) {
           tooltipElRef.current.hidePopover()
           setIsPopoverOpen(false)
+        } else {
+          setIsPopoverOpen(false)
         }
       } catch (error) {
         // older browsers don't support the :popover-open selector and will throw, even though we use a polyfill
@@ -362,10 +369,18 @@ export const Tooltip = React.forwardRef(
                 child.props.onFocus?.(event)
               },
               onMouseEnter: (event: React.MouseEvent) => {
-                openTooltip()
-                child.props.onMouseEnter?.(event)
+                // show tooltip after mosue has been hovering for at least 50ms
+                // (prevent showing tooltip when mouse is just passing through)
+                timeoutRef.current = safeSetTimeout(() => {
+                  openTooltip()
+                  child.props.onMouseEnter?.(event)
+                }, 50)
               },
               onMouseLeave: (event: React.MouseEvent) => {
+                if (timeoutRef.current) {
+                  safeClearTimeout(timeoutRef.current)
+                  timeoutRef.current = null
+                }
                 closeTooltip()
                 child.props.onMouseLeave?.(event)
               },