From 4478a43de7951e703af96faad213938c417e9da7 Mon Sep 17 00:00:00 2001
From: Melvin Valster <melvin.valster@gmail.com>
Date: Mon, 29 Jul 2019 22:12:32 +0200
Subject: [PATCH] Fix tooltips position and proper growing to size

---
 src/App.scss                          |  8 --------
 src/components/Calculator.scss        |  1 +
 src/components/Calculator.tsx         |  2 +-
 src/components/TalentTree.tsx         |  2 +-
 src/components/Tooltip/Controller.tsx |  9 +++++----
 src/components/Tooltip/Tooltip.scss   | 13 ++++++++++++-
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 3a34a61..766b13a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -76,11 +76,3 @@ footer {
   text-align: center;
   animation: fadeIn 3s forwards;
 }
-
-#tooltip-root {
-  position: absolute;
-  z-index: $z-index-tooltips;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
\ No newline at end of file
diff --git a/src/components/Calculator.scss b/src/components/Calculator.scss
index e913853..65a9a38 100644
--- a/src/components/Calculator.scss
+++ b/src/components/Calculator.scss
@@ -8,6 +8,7 @@
 
     span {
       margin-left: 2em;
+      animation: fadeIn .2s ease-out;
     }
   }
 }
diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx
index 11b80a4..db33486 100644
--- a/src/components/Calculator.tsx
+++ b/src/components/Calculator.tsx
@@ -61,7 +61,7 @@ export class Calculator extends React.PureComponent<Props> {
           <span>Talent points: {availablePoints}</span>
         </div>
 
-        <h4>Quick links</h4>
+        <h4>Quick links (TODO)</h4>
         <ul>
           <li><Link to="/shaman/-5505000055523051-55">Shaman test</Link></li>
           <li><Link to="/shaman/-5595000055523051-55">Shaman test broken</Link></li>
diff --git a/src/components/TalentTree.tsx b/src/components/TalentTree.tsx
index 42af1aa..eaa9907 100644
--- a/src/components/TalentTree.tsx
+++ b/src/components/TalentTree.tsx
@@ -43,7 +43,7 @@ export const TalentTree: React.FC<Props> = ({ specId, knownTalents, availablePoi
             <Trigger>
               <div className="tree__reset" onClick={handleResetSpec}>x</div>
             </Trigger>
-            <Tooltip>Reset spec</Tooltip>
+            <Tooltip><span className="green">Reset points in {specNames[specId]}</span></Tooltip>
           </Controller>
         }
       </div>
diff --git a/src/components/Tooltip/Controller.tsx b/src/components/Tooltip/Controller.tsx
index 28c6577..bf5de0a 100644
--- a/src/components/Tooltip/Controller.tsx
+++ b/src/components/Tooltip/Controller.tsx
@@ -49,14 +49,14 @@ export class Controller extends React.PureComponent<Props> {
     this.setState({ isVisible: false })
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     if (this.state.isVisible) {
       const { width, height } = (ReactDOM.findDOMNode(this.tooltip.current) as HTMLElement).getBoundingClientRect()
       const { style, tooltipDimensions } = this.state
 
       this.setState({
         tooltipDimensions: tooltipDimensions.merge({ width, height }),
-        style: style.merge(this.getPosition())
+        style: style.merge({ ...this.getPosition() })
       })
     }
   }
@@ -105,6 +105,7 @@ const calculatePosition = (pos: TooltipPosition, trigger: Map<string, number>, t
   let left = 0
 
   const triggerTop = trigger.get('top') + window.pageYOffset
+  const triggerLeft = trigger.get('left') + window.pageXOffset
 
   // Top
   switch (pos) {
@@ -126,14 +127,14 @@ const calculatePosition = (pos: TooltipPosition, trigger: Map<string, number>, t
     case 'left':
     case 'bottom-left':
     case 'top-left': {
-      left = (trigger.get('left')) - tooltip.get('width')
+      left = triggerLeft - tooltip.get('width')
       break
     }
 
     case 'right': 
     case 'bottom-right':
     case 'top-right': {
-      left = (trigger.get('left')) + trigger.get('width')
+      left = triggerLeft + trigger.get('width')
       break
     }
   }
diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
index 39f19e8..c93cb2c 100644
--- a/src/components/Tooltip/Tooltip.scss
+++ b/src/components/Tooltip/Tooltip.scss
@@ -1,4 +1,7 @@
+@import "../../sass/config";
+
 @mixin tooltip-base {
+  display: flex;
   font-size: 12px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   line-height: 1.4;
@@ -50,7 +53,6 @@
 
 .tooltip {
   @include tooltip-base;
-  display: flex;
 
   &--inline {
     display: inline-block;
@@ -82,4 +84,13 @@
       margin-bottom: 2px;
     }
   }
+}
+
+#tooltip-root {
+  position: absolute;
+  z-index: $z-index-tooltips;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  pointer-events: none;
 }
\ No newline at end of file