added tooltips

src/App.vue

@@ -327,4 +327,48 @@
     .slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to {
         transform: translateX(-400px);
     }
+    .tooltip {
+        background: #000000;
+        font-size: 12px;
+        padding: 5px 15px;
+        border-radius: 4px;
+
+        &[x-placement='top'] {
+            margin-bottom: 5px;
+
+            &:after {
+                top: 100%;
+                left: 50%;
+                border: solid transparent;
+                content: " ";
+                height: 0;
+                width: 0;
+                position: absolute;
+                pointer-events: none;
+                border-color: rgba(0, 0, 0, 0);
+                border-top-color: #000000;
+                border-width: 8px;
+                margin-left: -8px;
+            }
+        }
+
+        &[x-placement='right'] {
+            margin-left: 5px;
+
+            &:after {
+                right: 100%;
+                top: 50%;
+                border: solid transparent;
+                content: " ";
+                height: 0;
+                width: 0;
+                position: absolute;
+                pointer-events: none;
+                border-color: rgba(0, 0, 0, 0);
+                border-right-color: #000000;
+                border-width: 8px;
+                margin-top: -8px;
+            }
+        }
+    }
 </style>

src/components/Navigation/Navigation.vue

 <template>
     <aside>
         <nav>
-            <router-link to="/" exact class="item"><i class="mdi mdi-home-outline"></i></router-link>
-            <router-link to="/search" class="item"><i class="mdi mdi-magnify"></i></router-link>
-            <router-link to="/library" class="item"><i class="mdi mdi-music-box-multiple-outline"></i></router-link>
-            <div v-on:click="openExternal('https://spinsha.re/support');" class="item"><i class="mdi mdi-hand-heart"></i></div>
+            <router-link to="/" exact class="item" v-tooltip.right="'Frontpage'"><i class="mdi mdi-home-outline"></i></router-link>
+            <router-link to="/search" class="item" v-tooltip.right="'Search'"><i class="mdi mdi-magnify"></i></router-link>
+            <router-link to="/library" class="item" v-tooltip.right="'Library'"><i class="mdi mdi-music-box-multiple-outline"></i></router-link>
+            <div v-on:click="openExternal('https://spinsha.re/support');" class="item" v-tooltip.right="'Support'"><i class="mdi mdi-hand-heart"></i></div>
         </nav>
 
         <nav>
-            <div v-on:click="openExternal('steam://run/1058830');" class="item"><i class="mdi mdi-play-outline"></i></div>
-            <div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')">
+            <div v-on:click="openExternal('steam://run/1058830');" class="item" v-tooltip.right="'Start SpinRhythm XD'"><i class="mdi mdi-play-outline"></i></div>
+            <div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')" v-tooltip.right="'Download Queue'">
                 <i class="mdi mdi-download-outline"></i>
                 <span class="badge" v-show="downloadQueueCount > 0">{{ downloadQueueCount }}</span>
             </div>
-            <router-link to="/settings" class="item"><i class="mdi mdi-cog-outline"></i></router-link>
+            <router-link to="/settings" class="item" v-tooltip.right="'Settings'"><i class="mdi mdi-cog-outline"></i></router-link>
         </nav>
     </aside>
 </template>

src/main.js

@@ -6,9 +6,14 @@ import i18n from './i18n';
 import moment from 'moment'
 import { ipcRenderer } from 'electron';
 import VueObserveVisibility from 'vue-observe-visibility'
+import { VTooltip, VPopover, VClosePopover } from 'v-tooltip'
 
 Vue.use(VueObserveVisibility);
 
+Vue.directive('tooltip', VTooltip);
+Vue.directive('close-popover', VClosePopover);
+Vue.component('v-popover', VPopover);
+
 Vue.config.productionTip = false;
 
 

src/views/SongDetail.vue

@@ -13,23 +13,23 @@
                 </div>
             </div>
             <div :class="'song-actions ' + (previewIsPlaying ? 'player-active' : '')">
-                <div v-on:click="AddToQueue()" class="action" v-if="!isInstalled">
+                <div v-on:click="AddToQueue()" class="action" v-if="!isInstalled" v-tooltip="'Download'">
                     <div class="icon">
                         <i class="mdi mdi-download"></i>
                     </div>
                 </div>
-                <div v-on:click="ShowPlayOverlay()" class="action" v-if="isInstalled">
+                <div v-on:click="ShowPlayOverlay()" class="action" v-if="isInstalled" v-tooltip="'Play'">
                     <div class="icon">
                         <i class="mdi mdi-gamepad-variant"></i>
                     </div>
                 </div>
-                <div v-on:click="AddToQueue()" class="action" v-if="isInstalled">
+                <div v-on:click="AddToQueue()" class="action" v-if="isInstalled" v-tooltip="'Redownload'">
                     <div class="icon">
                         <i class="mdi mdi-refresh"></i>
                     </div>
                 </div>
                 <div class="action-player">
-                    <div class="icon" v-on:click="TogglePreview()">
+                    <div class="icon" v-on:click="TogglePreview()" v-tooltip="previewIsPlaying ? 'Stop Preview' : 'Play Preview'">
                         <i class="mdi mdi-play" v-if="!previewIsPlaying"></i>
                         <i class="mdi mdi-stop" v-if="previewIsPlaying"></i>
                     </div>
@@ -37,12 +37,12 @@
                         <input type="range" min="0" max="100" value="50" v-model="previewVolume" class="playerVolume" v-on:input="UpdateVolume()" />
                     </div>
                 </div>
-                <div v-on:click="CopyLink()" class="action">
+                <div v-on:click="CopyLink()" class="action" v-tooltip="'Copy Link'">
                     <div class="icon">
                         <i class="mdi mdi-content-copy"></i>
                     </div>
                 </div>
-                <div v-on:click="OpenReport()" class="action">
+                <div v-on:click="OpenReport()" class="action" v-tooltip="'Report'">
                     <div class="icon">
                         <i class="mdi mdi-flag-outline"></i>
                     </div>
@@ -62,7 +62,7 @@
                     </div>
                 </div>
                 <div class="stat" v-if="uploadDate">
-                    <div class="icon">
+                    <div class="icon" v-tooltip="'Upload Date'">
                         <i class="mdi mdi-calendar-clock"></i>
                     </div>
                     <div class="content">
@@ -70,7 +70,7 @@
                     </div>
                 </div>
                 <div class="stat">
-                    <div class="icon">
+                    <div class="icon" v-tooltip="'Views'">
                         <i class="mdi mdi-eye"></i>
                     </div>
                     <div class="content">
@@ -78,7 +78,7 @@
                     </div>
                 </div>
                 <div class="stat">
-                    <div class="icon">
+                    <div class="icon" v-tooltip="'Downloads'">
                         <i class="mdi mdi-download"></i>
                     </div>
                     <div class="content">