fix(tooltip): prevent layout shift (#315)

project44 · Mar 20, 2023 · 5a2ed53 · 5a2ed53 · vercel · Mar 20, 2023
1 parent cb1785e
commit 5a2ed53
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/.changeset/neat-beers-itch.md b/.changeset/neat-beers-itch.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react-tooltip': minor
+---
+
+fix tooltip layout shift
diff --git a/packages/react/components/tooltip/src/Tooltip.tsx b/packages/react/components/tooltip/src/Tooltip.tsx
@@ -58,7 +58,7 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => {
       <TooltipProvider
         value={{ tooltipProps: { ...tooltipProps, ...positionProps }, tooltipRef, state }}
       >
-        <Fade appear mountOnEnter unmountOnExit in={state.isOpen}>
+        <Fade appear mountOnEnter unmountOnExit in={state.isOpen} style={{ position: 'absolute' }}>
           <TooltipContent {...other} ref={forwardedRef}>
             {title}
           </TooltipContent>

diff --git a/packages/react/components/tooltip/stories/Tooltip.stories.tsx b/packages/react/components/tooltip/stories/Tooltip.stories.tsx
@@ -29,3 +29,20 @@ export const Placement = () => (
     </Tooltip>
   </Stack>
 );
+
+export const IsOpen = () => (
+  <Stack css={{ marginTop: 56 }} gap="x-large" orientation="horizontal">
+    <Tooltip isOpen placement="bottom" title="bottom">
+      <Button>Hover Me</Button>
+    </Tooltip>
+    <Tooltip isOpen placement="left" title="left">
+      <Button>Hover Me</Button>
+    </Tooltip>
+    <Tooltip isOpen placement="right" title="right">
+      <Button>Hover Me</Button>
+    </Tooltip>
+    <Tooltip isOpen placement="top" title="top">
+      <Button>Hover Me</Button>
+    </Tooltip>
+  </Stack>
+);