Fix tooltips position and proper growing to size

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;
-}

src/components/Calculator.scss

@@ -8,6 +8,7 @@
 
     span {
       margin-left: 2em;
+      animation: fadeIn .2s ease-out;
     }
   }
 }

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>

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>

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
     }
   }

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;
 }