Add delay functionality to tooltips

packages/react/src/Button/IconButton.features.stories.tsx

@@ -95,3 +95,10 @@ export const KeybindingHintOnDescription = () => (
 )
 
 export const KeybindingHint = () => <IconButton icon={BoldIcon} aria-label="Bold" keybindingHint="Mod+B" />
+
+export const LongDelayedTooltip = () => (
+  // Ideal for cases where we don't want to show the tooltip immediately — for example, when the user is just passing over the element.
+  <Tooltip text="This is a tooltip with 1200ms delay" delay="long">
+    <IconButton icon={HeartIcon} aria-label="HeartIcon" />
+  </Tooltip>
+)

packages/react/src/TooltipV2/Tooltip.features.stories.tsx

@@ -1,7 +1,15 @@
 import {IconButton, Button, Link, ActionMenu, ActionList, VisuallyHidden} from '..'
 import Octicon from '../Octicon'
 import {Tooltip} from './Tooltip'
-import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon, InfoIcon} from '@primer/octicons-react'
+import {
+  SearchIcon,
+  BookIcon,
+  CheckIcon,
+  TriangleDownIcon,
+  GitBranchIcon,
+  InfoIcon,
+  HeartIcon,
+} from '@primer/octicons-react'
 import classes from './Tooltip.features.stories.module.css'
 
 export default {
@@ -194,3 +202,19 @@ export const KeybindingHint = () => (
     </Tooltip>
   </div>
 )
+
+export const WithMediumDelay = () => (
+  <div className={classes.PaddedContainer}>
+    <Tooltip text="Tooltip is delayed by 600ms" delay="medium">
+      <Button>With delay</Button>
+    </Tooltip>
+  </div>
+)
+
+export const WithLongDelay = () => (
+  <div className={classes.PaddedContainer}>
+    <Tooltip text="Tooltip is delayed by 1200ms" delay="long">
+      <IconButton icon={HeartIcon} variant="invisible" aria-label="Favorite" />
+    </Tooltip>
+  </div>
+)

packages/react/src/TooltipV2/Tooltip.tsx

@@ -20,6 +20,13 @@ export type TooltipProps = React.PropsWithChildren<
     text: string
     type?: 'label' | 'description'
     keybindingHint?: KeybindingHintProps['keys']
+    /**
+     * Delay in milliseconds before showing the tooltip
+     * @default instant 50ms
+     * medium 400ms
+     * long 1200ms
+     */
+    delay?: 'instant' | 'medium' | 'long'
   } & SxProp
 > &
   React.HTMLAttributes<HTMLElement>
@@ -83,7 +90,17 @@ export const TooltipContext = React.createContext<{tooltipId?: string}>({})
 
 export const Tooltip = React.forwardRef(
   (
-    {direction = 's', text, type = 'description', children, id, className, keybindingHint, ...rest}: TooltipProps,
+    {
+      direction = 's',
+      text,
+      type = 'description',
+      children,
+      id,
+      className,
+      keybindingHint,
+      delay = 'instant',
+      ...rest
+    }: TooltipProps,
     forwardedRef,
   ) => {
     const tooltipId = useId(id)
@@ -284,14 +301,20 @@ export const Tooltip = React.forwardRef(
                 child.props.onFocus?.(event)
               },
               onMouseOverCapture: (event: React.MouseEvent) => {
+                const delayTimeMap = {
+                  instant: 50,
+                  medium: 400,
+                  long: 1200,
+                }
+                const delayTime = delayTimeMap[delay] || 50
                 // We use a `capture` event to ensure this is called first before
                 // events that might cancel the opening timeout (like `onTouchEnd`)
-                // show tooltip after mouse has been hovering for at least 50ms
+                // show tooltip after mouse has been hovering for the specified delay time
                 // (prevent showing tooltip when mouse is just passing through)
                 openTimeoutRef.current = safeSetTimeout(() => {
                   openTooltip()
                   child.props.onMouseEnter?.(event)
-                }, 50)
+                }, delayTime)
               },
               onMouseLeave: (event: React.MouseEvent) => {
                 closeTooltip()