Tooltip - support custom mountNode (#22134)

* Add mountNode prop to tooltip

* update rooltip api

* change file

* fix test in story

* update example to use setRef

* remove default value of mountNode

* Update packages/react-tooltip/src/stories/TooltipCustomMount.stories.tsx

Co-authored-by: Makoto Morimoto <[email protected]>

* Update change/@fluentui-react-tooltip-79df9179-1dd1-4817-9d7b-623d2a2fe436.json

Co-authored-by: Oleksandr Fediashov <[email protected]>

* Update packages/react-tooltip/src/stories/TooltipCustomMount.stories.tsx

Co-authored-by: Oleksandr Fediashov <[email protected]>

Co-authored-by: Makoto Morimoto <[email protected]>
Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: 3 people

change/@fluentui-react-tooltip-79df9179-1dd1-4817-9d7b-623d2a2fe436.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add mountNode prop",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-tooltip/etc/react-tooltip.api.md

@@ -7,6 +7,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
 
 /**
  * Slot properties for Tooltip
@@ -15,7 +16,7 @@ export type TooltipSlots = {
 /**
  * Properties and state for Tooltip
  */
-type TooltipCommons = {
+type TooltipCommons = Pick<PortalProps, 'mountNode'> & {
   /**
    * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
    *

packages/react-tooltip/src/components/Tooltip/renderTooltip.tsx

@@ -13,7 +13,7 @@ export const renderTooltip_unstable = (state: TooltipState) => {
     <>
       {state.children}
       {state.shouldRenderTooltip && (
-        <Portal>
+        <Portal mountNode={state.mountNode}>
           <slots.content {...slotProps.content}>
             {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}
             {state.content.children}

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

@@ -40,6 +40,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
     relationship,
     showDelay = 250,
     hideDelay = 250,
+    mountNode,
   } = props;
 
   const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });
@@ -65,7 +66,7 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => {
     visible,
     shouldRenderTooltip: visible,
     appearance,
-
+    mountNode,
     // Slots
     components: {
       content: 'div',

packages/react-tooltip/src/stories/Tooltip.stories.tsx

@@ -8,7 +8,7 @@ export { RelationshipDescription } from './TooltipRelationshipDescription.storie
 export { Inverted } from './TooltipInverted.stories';
 export { WithArrow } from './TooltipWithArrow.stories';
 export { Styled } from './TooltipStyled.stories';
-
+export { CustomMount } from './TooltipCustomMount.stories';
 export { Controlled } from './TooltipControlled.stories';
 export { Positioning } from './TooltipPositioning.stories';
 export { Target } from './TooltipTarget.stories';

packages/react-tooltip/src/stories/TooltipCustomMount.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { Tooltip, TooltipProps } from '../Tooltip';
+import { Button } from '@fluentui/react-button';
+import { SlideTextRegular } from '@fluentui/react-icons';
+
+export const CustomMount = (props: Partial<TooltipProps>) => {
+  const [ref, setRef] = React.useState<HTMLElement | null>();
+
+  return (
+    <>
+      <Tooltip mountNode={ref} content="Example tooltip" relationship="label" {...props}>
+        <Button icon={<SlideTextRegular />} size="large" />
+      </Tooltip>
+      <div ref={setRef} />
+    </>
+  );
+};
+
+CustomMount.parameters = {
+  docs: {
+    description: {
+      story: `Tooltips are rendered in a React Portal. By default that Portal is the outermost div.
+      A custom \`mountNode\` can be provided in the case that the tooltip needs to be rendered elsewhere.`,
+    },
+  },
+};