diff --git a/change/@fluentui-react-tooltip-783b798d-8864-492c-a76d-bd4fdc1d0775.json b/change/@fluentui-react-tooltip-783b798d-8864-492c-a76d-bd4fdc1d0775.json new file mode 100644 index 00000000000000..340acfa2332fab --- /dev/null +++ b/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": "vgenaev@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts index e4b4e7218f27ec..a206d213748aed 100644 --- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts +++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts @@ -20,7 +20,15 @@ export type TooltipChildProps = { ref?: React.Ref; } & Pick< React.HTMLAttributes, - 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave' + | 'aria-describedby' + | 'aria-label' + | 'aria-labelledby' + | 'onBlur' + | 'onFocus' + | 'onPointerEnter' + | 'onPointerLeave' + | 'aria-haspopup' + | 'aria-expanded' >; /** diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx b/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx index 5916c354587bf5..8d5382f23353f9 100644 --- a/packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltip.tsx +++ b/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 = {}; + 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; }