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]>
microsoft · Mar 28, 2022 · f10cc04 · f10cc04
1 parent dc052f7
commit f10cc04
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 4 deletions.
diff --git a/change/@fluentui-react-tooltip-79df9179-1dd1-4817-9d7b-623d2a2fe436.json b/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"
+}
diff --git a/packages/react-tooltip/etc/react-tooltip.api.md b/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';

diff --git a/packages/react-tooltip/src/components/Tooltip/Tooltip.types.ts b/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.
    *

diff --git a/packages/react-tooltip/src/components/Tooltip/renderTooltip.tsx b/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}

diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltip.tsx b/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',

diff --git a/packages/react-tooltip/src/stories/Tooltip.stories.tsx b/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';

diff --git a/packages/react-tooltip/src/stories/TooltipCustomMount.stories.tsx b/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.`,
+    },
+  },
+};