add tooltip on hover on repeat/loop, shuffle and playlist for issue #87 (#99)

Author: russellschmidt

Diff for: scripts/components/Player.js

@@ -458,12 +458,14 @@ class Player extends Component {
                 onClick={this.toggleRepeat}
               >
                 <i className="icon ion-loop" />
+                <span className="player-button-tooltip">Repeat</span>
               </div>
               <div
                 className={`player-button ${(this.state.shuffle ? ' active' : '')}`}
                 onClick={this.toggleShuffle}
               >
                 <i className="icon ion-shuffle" />
+                <span className="player-button-tooltip">Shuffle</span>
               </div>
               <Popover className="player-button top-right">
                 <i className="icon ion-android-list" />

Diff for: scripts/components/Popover.js

@@ -58,6 +58,7 @@ class Popover extends Component {
       >
         {children[0]}
         {isOpen ? children[1] : null}
+        <span className="player-button-tooltip">Playlist</span>
       </div>
     );
   }

Diff for: styles/custom/components/player.scss

@@ -60,6 +60,13 @@
         & > i {
             color: #A6D2A5;
         }
+
+        .player-button-tooltip {
+            margin-left: -22px;
+            &::after {
+              content: ' off';
+            }
+        }
     }
 
     &:hover {
@@ -72,6 +79,10 @@
         .ion-ios-pause {
             color: #86AB85;
         }
+
+        .player-button-tooltip {
+          display: block;
+        }
     }
 
     & + .player-button {
@@ -83,6 +94,15 @@
     }
 }
 
+.player-button-tooltip {
+    display: none;
+    position: absolute;
+    color: #222;
+    font-size: 10px;
+    margin-left: -12px;
+    margin-top: -31px;
+}
+
 .player-seek {
     flex: 1;
 }