From a9282c693d65cdf3e9590a01daa2a75e5a467b9c Mon Sep 17 00:00:00 2001
From: trisianto <trisianto@netflix.com>
Date: Sun, 27 Oct 2019 13:24:15 -0700
Subject: [PATCH 1/4] add more tooltip attributes for more flexible
 customization

---
 src/components/TooltipPositioner.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/TooltipPositioner.tsx b/src/components/TooltipPositioner.tsx
index df1fff98..6f6c780e 100644
--- a/src/components/TooltipPositioner.tsx
+++ b/src/components/TooltipPositioner.tsx
@@ -9,7 +9,8 @@ class TooltipPositioner extends React.Component<Props> {
   private containerRef = React.createRef<HTMLDivElement>()
 
   state = {
-    offset: null
+    offset: null,
+    tooltipDimensions: null
   }
 
   // simple heuristics to check if the tooltip container exceeds the viewport
@@ -19,7 +20,8 @@ class TooltipPositioner extends React.Component<Props> {
       x: 0,
       y: 0
     }
-    const { right, left, top, bottom } = this.containerRef.current.getBoundingClientRect()
+    const tooltipContainerInitialDimensions = this.containerRef.current.getBoundingClientRect()
+    const { right, left, top, bottom } = tooltipContainerInitialDimensions
     const containerWidth = right - left
     const containerHeight = bottom - top
 
@@ -37,7 +39,8 @@ class TooltipPositioner extends React.Component<Props> {
     }
 
     this.setState({
-      offset
+      offset,
+      tooltipContainerInitialDimensions
     })
   }
 
@@ -66,7 +69,8 @@ class TooltipPositioner extends React.Component<Props> {
     } = this.props
 
     const {
-      offset
+      offset,
+      tooltipContainerInitialDimensions
     } = this.state
 
     const containerStyle = offset?
@@ -77,10 +81,15 @@ class TooltipPositioner extends React.Component<Props> {
         opacity: 0
       }
 
+    const tooltipContainerAttributes = {
+      offset,
+      tooltipContainerInitialDimensions
+    }
+
     return (
       <div ref={this.containerRef} style={containerStyle}>
         {tooltipContent({...tooltipContentArgs,
-          tooltipContainerOffset: offset? offset: {x:0, y:0}})}
+          tooltipContainerAttributes})}
       </div>
     )
   }

From a9fdedbeae6fb81aa0291768ff28ebe91be2ed5e Mon Sep 17 00:00:00 2001
From: trisianto <trisianto@netflix.com>
Date: Sun, 27 Oct 2019 13:29:01 -0700
Subject: [PATCH 2/4] fixed init state key

---
 src/components/TooltipPositioner.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/TooltipPositioner.tsx b/src/components/TooltipPositioner.tsx
index df1fff98..a722fc52 100644
--- a/src/components/TooltipPositioner.tsx
+++ b/src/components/TooltipPositioner.tsx
@@ -9,7 +9,8 @@ class TooltipPositioner extends React.Component<Props> {
   private containerRef = React.createRef<HTMLDivElement>()
 
   state = {
-    offset: null
+    offset: null,
+    tooltipContainerInitialDimensions: null
   }
 
   // simple heuristics to check if the tooltip container exceeds the viewport
@@ -19,7 +20,8 @@ class TooltipPositioner extends React.Component<Props> {
       x: 0,
       y: 0
     }
-    const { right, left, top, bottom } = this.containerRef.current.getBoundingClientRect()
+    const tooltipContainerInitialDimensions = this.containerRef.current.getBoundingClientRect()
+    const { right, left, top, bottom } = tooltipContainerInitialDimensions
     const containerWidth = right - left
     const containerHeight = bottom - top
 
@@ -37,7 +39,8 @@ class TooltipPositioner extends React.Component<Props> {
     }
 
     this.setState({
-      offset
+      offset,
+      tooltipContainerInitialDimensions
     })
   }
 
@@ -66,7 +69,8 @@ class TooltipPositioner extends React.Component<Props> {
     } = this.props
 
     const {
-      offset
+      offset,
+      tooltipContainerInitialDimensions
     } = this.state
 
     const containerStyle = offset?
@@ -77,10 +81,15 @@ class TooltipPositioner extends React.Component<Props> {
         opacity: 0
       }
 
+    const tooltipContainerAttributes = {
+      offset,
+      tooltipContainerInitialDimensions
+    }
+
     return (
       <div ref={this.containerRef} style={containerStyle}>
         {tooltipContent({...tooltipContentArgs,
-          tooltipContainerOffset: offset? offset: {x:0, y:0}})}
+          tooltipContainerAttributes})}
       </div>
     )
   }

From a95a9383440346e7374db9a639c3088c0c073703 Mon Sep 17 00:00:00 2001
From: trisianto <trisianto@netflix.com>
Date: Sun, 27 Oct 2019 13:32:57 -0700
Subject: [PATCH 3/4] fixed type

---
 src/components/TooltipPositioner.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/TooltipPositioner.tsx b/src/components/TooltipPositioner.tsx
index a722fc52..dc84ee5b 100644
--- a/src/components/TooltipPositioner.tsx
+++ b/src/components/TooltipPositioner.tsx
@@ -5,7 +5,12 @@ type Props = {
   tooltipContentArgs?: object
 }
 
-class TooltipPositioner extends React.Component<Props> {
+type State = {
+  offset: object,
+  tooltipContainerInitialDimensions: object
+}
+
+class TooltipPositioner extends React.Component<Props, State> {
   private containerRef = React.createRef<HTMLDivElement>()
 
   state = {

From c69a8b563b68b61c01c7210c768d42bbb14fe711 Mon Sep 17 00:00:00 2001
From: trisianto <trisianto@netflix.com>
Date: Sun, 27 Oct 2019 14:55:39 -0700
Subject: [PATCH 4/4] hide tooltip when new props received

---
 src/components/TooltipPositioner.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/TooltipPositioner.tsx b/src/components/TooltipPositioner.tsx
index dc84ee5b..1ab5415e 100644
--- a/src/components/TooltipPositioner.tsx
+++ b/src/components/TooltipPositioner.tsx
@@ -7,7 +7,8 @@ type Props = {
 
 type State = {
   offset: object,
-  tooltipContainerInitialDimensions: object
+  tooltipContainerInitialDimensions: object,
+  tooltipContentArgsCurrent: object
 }
 
 class TooltipPositioner extends React.Component<Props, State> {
@@ -15,7 +16,8 @@ class TooltipPositioner extends React.Component<Props, State> {
 
   state = {
     offset: null,
-    tooltipContainerInitialDimensions: null
+    tooltipContainerInitialDimensions: null,
+    tooltipContentArgsCurrent: null
   }
 
   // simple heuristics to check if the tooltip container exceeds the viewport
@@ -45,7 +47,8 @@ class TooltipPositioner extends React.Component<Props, State> {
 
     this.setState({
       offset,
-      tooltipContainerInitialDimensions
+      tooltipContainerInitialDimensions,
+      tooltipContentArgsCurrent: this.props.tooltipContentArgs
     })
   }
 
@@ -59,7 +62,8 @@ class TooltipPositioner extends React.Component<Props, State> {
     // if new args, reset offset state
     if(pp.tooltipContentArgs !== this.props.tooltipContentArgs){
       this.setState({
-        offset: null
+        offset: null,
+        tooltipContainerInitialDimensions: null
       })
     }
     else if(this.containerRef.current && !this.state.offset){
@@ -75,10 +79,11 @@ class TooltipPositioner extends React.Component<Props, State> {
 
     const {
       offset,
-      tooltipContainerInitialDimensions
+      tooltipContainerInitialDimensions,
+      tooltipContentArgsCurrent
     } = this.state
 
-    const containerStyle = offset?
+    const containerStyle = offset && (tooltipContentArgsCurrent===tooltipContentArgs)?
       {
         transform: `translate(${offset.x}px,${offset.y}px)`
       } :
@@ -87,7 +92,7 @@ class TooltipPositioner extends React.Component<Props, State> {
       }
 
     const tooltipContainerAttributes = {
-      offset,
+      offset: offset || {x:0, y:0},
       tooltipContainerInitialDimensions
     }