fix TooltipWithBounds positioning

airbnb · Oct 3, 2020 · dde3480 · dde3480
1 parent b73303e
commit dde3480
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx
@@ -39,8 +39,11 @@ export default function Tooltip({
     <div
       className={cx('visx-tooltip', className)}
       style={{
-        top: top == null || offsetTop == null ? top : top + offsetTop,
-        left: left == null || offsetLeft == null ? left : left + offsetLeft,
+        left: 0,
+        top: 0,
+        transform: `translate(${left == null || offsetLeft == null ? left : left + offsetLeft}px, ${
+          top == null || offsetTop == null ? top : top + offsetTop
+        }px)`, 
         ...(!unstyled && style),
       }}
       {...restProps}

diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx
@@ -44,12 +44,12 @@ function TooltipWithBounds({
 
   return (
     <Tooltip
-      style={{
-        top: 0,
-        left: 0,
-        transform: `translate(${left}px, ${top}px)`,
-        ...(!unstyled && style),
-      }}
+      top={top}
+      left={left}
+      offsetTop={0}
+      offsetLeft={0}
+      style={style}
+      unstyled={unstyled}
       {...otherProps}
     >
       {children}

diff --git a/packages/visx-tooltip/test/TooltipWithBounds.test.tsx b/packages/visx-tooltip/test/TooltipWithBounds.test.tsx
@@ -21,7 +21,7 @@ describe('<TooltipWithBounds />', () => {
     const wrapper = shallow(<TooltipWithBounds unstyled>Hello</TooltipWithBounds>, {
       disableLifecycleMethods: true,
     }).dive();
-    const styles = wrapper.find('Tooltip').props().style as any;
+    const styles = wrapper.find('Tooltip').dive().find('.visx-tooltip').props().style as any;
     Object.keys(defaultStyles).forEach(key => {
       expect(styles[key]).toBeUndefined();
     });