Don't show tooltips if location isn't fully known

TODO.md

@@ -1,12 +1,14 @@
 # TODO
 
 - [ ] Fix: Tooltips cause horizontal scroll on less-wide screens. Investigate.
-- [ ] Fix: Tooltip flicker on page load, initially positioned in the top left
 - [ ] Fix: Tooltips positioned incorrectly after animating back to Home
 
+- [ ] Lay out Talents using flexbox
 - [ ] Move routing logic from `Home` into `Calculator`
 - [ ] Responsiveness:
-  - [ ] Tooltips on mobile need different UX
+  - [ ] Talent tooltips on mobile need different UX
 - [ ] Tooltips: 
   - [ ] Support multiple positions for tooltip (currently only `top-right` with fallbacks based on viewport)
+  - [ ] Performance: see if we can cache Trigger's getBoundingClientRect and reset it on url change (?)
+
 - [ ] Move icons back under `/src` when https://github.com/facebook/create-react-app/pull/6060 is released as part of 3.0.2

src/components/Tooltip/Controller.tsx

@@ -28,6 +28,7 @@ export class Controller extends React.PureComponent<Props> {
       position: 'absolute' as 'absolute',
       left: 0,
       top: 0,
+      opacity: 0,
     }),
     triggerRect: Map({
       left: 0,
@@ -38,11 +39,13 @@ export class Controller extends React.PureComponent<Props> {
   }
 
   handleMouseEnter = () => {
+    // TODO: cache this even for url transition (?), it's "expensive" and triggers reflow
+    const { width, height, top, left } = (ReactDOM.findDOMNode(this.trigger.current) as HTMLElement).getBoundingClientRect()
+
     this.setState({ 
       isVisible: true,
-      style: this.state.style.merge(this.getPosition())
+      triggerRect: this.state.triggerRect.merge({ width, height, top, left })
     })
-    
   }
 
   handleMouseLeave = () => {
@@ -54,21 +57,22 @@ export class Controller extends React.PureComponent<Props> {
       const { width, height } = (ReactDOM.findDOMNode(this.tooltip.current) as HTMLElement).getBoundingClientRect()
       const { style, tooltipDimensions } = this.state
 
+      const newTooltipDimensions = tooltipDimensions.merge({ width, height })
       this.setState({
-        tooltipDimensions: tooltipDimensions.merge({ width, height }),
+        tooltipDimensions: newTooltipDimensions,
-        style: style.merge({ ...this.getPosition() })
+        style: style.merge({ ...this.getPosition(newTooltipDimensions) })
       })
     }
   }
 
-  getPosition = (): { top: number, left: number } => {
+  getPosition = (tooltipDimensions = this.state.tooltipDimensions): { top: number, left: number } => {
-    const { tooltipDimensions, triggerRect } = this.state
+    return calculatePosition(this.props.position, this.state.triggerRect, tooltipDimensions)
-    return calculatePosition(this.props.position, triggerRect, tooltipDimensions)
   }
 
   updateTriggerRect = (triggerRect: { left: number, top: number, width: number, height: number }) => {
     this.setState({
-      triggerRect: this.state.triggerRect.merge(triggerRect)
+      triggerRect: this.state.triggerRect.merge(triggerRect),
+      style: this.state.style.set('opacity', 1)
     })
   }
 
@@ -158,5 +162,3 @@ const calculatePosition = (pos: TooltipPosition, trigger: Map<string, number>, t
 
   return { top, left }
 }
-
-

src/containers/Home.tsx

@@ -99,7 +99,7 @@ export class Home extends React.PureComponent<Props> {
         <div className="container">
           <div className={classPickerCn}>
             {!selectedClass &&
-              <h3 className="home__class-picker-title">Choose your class</h3>
+              <h3 className="home__class-picker-title">Choose a class</h3>
             }
             <ClassPicker
               center