TooltipV2: Hide Tooltip when menu is active (#7142)

Author: TylerJDev

.changeset/wild-aliens-itch.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+IconButton: Hide tooltip when popup is open via new `closeTooltip` prop in `Tooltip`.

packages/react/src/Button/IconButton.tsx

@@ -28,7 +28,14 @@ const IconButton = forwardRef(
     const {tooltipId} = React.useContext(TooltipContext) // Tooltip v2
     const {tooltipId: tooltipIdV1} = React.useContext(TooltipContextV1) // Tooltip v1
 
+    const {'aria-expanded': isExpanded, 'aria-haspopup': hasPopup} = props
+
     const hasExternalTooltip = tooltipId || tooltipIdV1
+
+    // If the button has an active "popup" (like a menu), we don't want to show the tooltip.
+    // This is mostly for `ActionMenu`, but could be applicable elsewhere.
+    const hasActivePopup = (isExpanded === true || isExpanded === 'true') && hasPopup === 'true'
+
     const withoutTooltip =
       unsafeDisableTooltip || disabled || ariaLabel === undefined || ariaLabel === '' || hasExternalTooltip
 
@@ -55,6 +62,7 @@ const IconButton = forwardRef(
           type={description ? undefined : 'label'}
           direction={tooltipDirection}
           keybindingHint={keybindingHint ?? keyshortcuts}
+          _privateDisableTooltip={hasActivePopup}
         >
           <ButtonBase
             icon={Icon}

packages/react/src/TooltipV2/Tooltip.tsx

@@ -25,6 +25,16 @@ export type TooltipProps = React.PropsWithChildren<{
    * long (1200ms)
    */
   delay?: 'short' | 'medium' | 'long'
+  /**
+   * Private API for use internally only. Prevents the tooltip from opening if `true`.
+   *
+   * Accessibility note: This prop should be used with caution. Only use when needing to
+   * programmatically close the tooltip in response to a specific user action, such as
+   * opening a menu, or content where the tooltip could overlap with interactive content.
+   *
+   * @default false
+   */
+  _privateDisableTooltip?: boolean
 }> &
   React.HTMLAttributes<HTMLElement>
 
@@ -107,6 +117,7 @@ export const Tooltip: ForwardRefExoticComponent<
       className,
       keybindingHint,
       delay = 'short',
+      _privateDisableTooltip = false,
       ...rest
     }: TooltipProps,
     forwardedRef,
@@ -130,7 +141,8 @@ export const Tooltip: ForwardRefExoticComponent<
           tooltipElRef.current &&
           triggerRef.current &&
           tooltipElRef.current.hasAttribute('popover') &&
-          !tooltipElRef.current.matches(':popover-open')
+          !tooltipElRef.current.matches(':popover-open') &&
+          !_privateDisableTooltip
         ) {
           const tooltip = tooltipElRef.current
           const trigger = triggerRef.current