feat(react-tooltip): do not show tooltip, if it's applied to menu tri…

…gger and menu is opened (#33394)

change/@fluentui-react-tooltip-783b798d-8864-492c-a76d-bd4fdc1d0775.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: do not show tooltip, if it's menu trigger and Menu is opened",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts

@@ -20,7 +20,15 @@ export type TooltipChildProps = {
   ref?: React.Ref<unknown>;
 } & Pick<
   React.HTMLAttributes<HTMLElement>,
-  'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'
+  | 'aria-describedby'
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'onBlur'
+  | 'onFocus'
+  | 'onPointerEnter'
+  | 'onPointerLeave'
+  | 'aria-haspopup'
+  | 'aria-expanded'
 >;
 
 /**

packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx

@@ -238,6 +238,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
   const child = getTriggerChild(children);
 
   const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};
+  const isMenuTrigger = child?.props?.['aria-haspopup'] === 'menu' && child?.props?.['aria-expanded'];
 
   if (relationship === 'label') {
     // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
@@ -254,8 +255,9 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
     state.shouldRenderTooltip = true;
   }
 
-  // Don't render the Tooltip in SSR to avoid hydration errors
-  if (isServerSideRender) {
+  // Case 1: Don't render the Tooltip in SSR to avoid hydration errors
+  // Case 2: Don't render the Tooltip, if it triggers Menu and it's already opened
+  if (isServerSideRender || isMenuTrigger) {
     state.shouldRenderTooltip = false;
   }