positioning tooltips neatly

1 files changed, 8 insertions, 3 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index b9fe340..5775b11 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -47,6 +47,12 @@ class EfluxChrome extends Component {
         })
       }
     }
+    else if (prevProps.atEndOfSection !== this.props.atEndOfSection && this.props.atEndOfSection) {
+      // reached end of section
+      if (this.props.currentSection.index === 0) {
+        this.setState({ transcript: true })
+      }
+    }
   }
   render() {
     const {
@@ -55,7 +61,6 @@ class EfluxChrome extends Component {
       growlOpen, growlMessage,
       atEndOfSection, currentSection
     } = this.props
-    const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
     let className = "eflux-header"
     if (navStyle) className += ' ' + navStyle
     if (navGradient) className += ' gradient'
@@ -115,14 +120,14 @@ class EfluxChrome extends Component {
           {'Back to e-flux'}
         </div>
         <div className={
-          (!showingTranscriptTooltip && this.state.play)
+          (!this.state.transcript && this.state.play)
           ? "growl-tooltip tooltip-play hover"
           : "growl-tooltip tooltip-play"
         }>
           {this.state.playMessage}
         </div>
         <div className={
-            showingTranscriptTooltip
+            this.state.transcript
             ? "growl-tooltip tooltip-transcript hover"
             : "growl-tooltip tooltip-transcript"
           }