From e7a52265cd7f71f9b0b7b63f5fbe62236d203556 Mon Sep 17 00:00:00 2001
From: Russell Schmidt <russell.schmidt@me.com>
Date: Mon, 8 May 2017 17:23:01 -0700
Subject: [PATCH] add tooltip on hover on repeat/loop, shuffle and playlist for
 issue #87

---
 scripts/components/Player.js         |  2 ++
 scripts/components/Popover.js        |  1 +
 styles/custom/components/player.scss | 20 ++++++++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/scripts/components/Player.js b/scripts/components/Player.js
index d3169b21..bfb91d9b 100644
--- a/scripts/components/Player.js
+++ b/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 --git a/scripts/components/Popover.js b/scripts/components/Popover.js
index 616f8402..23de10eb 100644
--- a/scripts/components/Popover.js
+++ b/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 --git a/styles/custom/components/player.scss b/styles/custom/components/player.scss
index 415cac8b..1216ea5f 100644
--- a/styles/custom/components/player.scss
+++ b/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;
 }