From 0dc7dec93ee380f4251a433d7d1276318db2cf1b Mon Sep 17 00:00:00 2001
From: Anurag Singh <63957920+singhanurag05@users.noreply.github.com>
Date: Thu, 8 Oct 2020 00:05:03 +0530
Subject: [PATCH] fix TooltipWithBounds positioning (#828)

* remove line unstyled={unstyled} in TooltipWithBounds.tsx

* fix TooltipWithBounds positioning

* corrections for failing tests

* pass tests

Co-authored-by: Chris Williams <williaster@users.noreply.github.com>

* fix(Tooltip): add unit to translateY

Co-authored-by: Chris Williams <williaster@users.noreply.github.com>
---
 packages/visx-tooltip/src/tooltips/Tooltip.tsx        |  7 +++++--
 .../visx-tooltip/src/tooltips/TooltipWithBounds.tsx   | 11 +++++------
 packages/visx-tooltip/test/TooltipWithBounds.test.tsx |  6 +++++-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx
index d40425e0f..71f9445a2 100644
--- 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 ?? 0 : left + offsetLeft
+        }px, ${top == null || offsetTop == null ? top ?? 0 : top + offsetTop}px)`,
         ...(!unstyled && style),
       }}
       {...restProps}
diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx
index 0602b1df6..00f9bb986 100644
--- a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx
+++ b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx
@@ -44,12 +44,11 @@ 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}
     >
diff --git a/packages/visx-tooltip/test/TooltipWithBounds.test.tsx b/packages/visx-tooltip/test/TooltipWithBounds.test.tsx
index 8db249323..b7eaa53c7 100644
--- a/packages/visx-tooltip/test/TooltipWithBounds.test.tsx
+++ b/packages/visx-tooltip/test/TooltipWithBounds.test.tsx
@@ -21,7 +21,11 @@ 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();
     });