diff --git a/src/js/components/FullPlayer.js b/src/js/components/FullPlayer.js
index 8ca56c65..8604a8a9 100755
--- a/src/js/components/FullPlayer.js
+++ b/src/js/components/FullPlayer.js
@@ -39,25 +39,25 @@ class FullPlayer extends React.Component{
 	}
 
 	renderConsumeButton(){
-		var button = <a onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [true])}><FontAwesome name="fire" /></a>
+		var button = <a className="has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [true])}><FontAwesome name="fire" /><span className="tooltip">Consume</span></a>
 		if( this.props.consume ){
-			button = <a className="active" onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [false])}><FontAwesome name="fire" /></a>
+			button = <a className="active has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setConsume', [false])}><FontAwesome name="fire" /><span className="tooltip">Consume</span></a>
 		}
 		return button;
 	}
 
 	renderRandomButton(){
-		var button = <a onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [true])}><FontAwesome name="random" /></a>
+		var button = <a className="has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [true])}><FontAwesome name="random" /><span className="tooltip">Shuffle</span></a>
 		if( this.props.random ){
-			button = <a className="active" onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [false])}><FontAwesome name="random" /></a>
+			button = <a className="active has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRandom', [false])}><FontAwesome name="random" /><span className="tooltip">Shuffle</span></a>
 		}
 		return button;
 	}
 
 	renderRepeatButton(){
-		var button = <a onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}><FontAwesome name="repeat" /></a>
+		var button = <a className="has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}><FontAwesome name="repeat" /><span className="tooltip">Repeat</span></a>
 		if( this.props.repeat ){
-			button = <a className="active" onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}><FontAwesome name="repeat" /></a>
+			button = <a className="active has-tooltip" onClick={() => this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}><FontAwesome name="repeat" /><span className="tooltip">Repeat</span></a>
 		}
 		return button;
 	}
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index da2f416f..6e6fbd4d 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -6,7 +6,7 @@
 	bottom: 0;
 	right: 0;
 	z-index: 99;
-	background: rgba(10, 10, 10, 0.95);
+	background: $overlay_dark;
 	overflow-y: scroll;
 
 	.close-modal {
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss
index f33c96eb..c033533e 100755
--- a/src/scss/components/_notifications.scss
+++ b/src/scss/components/_notifications.scss
@@ -75,7 +75,7 @@
 		height: 400px;
 		width: 400px;
 		margin: -200px 0 0 -200px;
-		background: rgba(10, 10, 10, 0.95);
+		background: $overlay_dark;
 		color: $white;
 		border-radius: 10px;
 		text-align: center;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index aaef3088..476553d6 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -279,11 +279,58 @@ footer {
 	}
 }
 
+.has-tooltip {
+	position: relative;
+
+	.tooltip {
+		@include animate();
+		opacity: 0;
+		position: absolute;
+		pointer-events: none;
+		background: $overlay_dark;
+		display: block;
+		max-width: 200px;
+		padding: 5px;
+		color: $white;
+		font-size: 11px;
+		line-height: 11px;
+		top: -16px;
+		left: 4px;
+		z-index: 97;
+
+		&::before {
+			content: '';
+			display: block;
+			width: 6px;
+			height: 6px;
+			background: $overlay_dark;
+			-ms-transform: rotate(45deg);
+			-webkit-transform: rotate(45deg);
+			transform: rotate(45deg);
+			position: absolute;
+			bottom: -3px;
+			left: 9px;
+		}
+	}
+
+	&:hover {
+		.tooltip {
+			opacity: 1;
+			top: -18px;
+		}
+	}
+}
+
 
 @include responsive( $bp_medium ){
 	
-	.right-padding {		padding-right: 20px; }
-	.left-padding {			padding-left: 20px; }
+	.right-padding {
+		padding-right: 20px;
+	}
+
+	.left-padding {
+		padding-left: 20px;
+	}
 
 	h1 {
 		font-size: 30px;
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 69fe013b..1b34689b 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -14,6 +14,7 @@ $green: #47af2a;
 $blue: #32b5f2;
 $yellow: #FFF39C;
 $orange: #f16f19;
+$overlay_dark: rgba(10, 10, 10, 0.95);
 
 $bp_wide: 1000px;
 $bp_medium: 800px;