add experimental tooltip to songitem component

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.6",
     "@vueuse/core": "^8.5.0",
     "axios": "^0.26.1",
     "pinia": "^2.0.17",

src/components/shared/SongItem.vue

@@ -20,8 +20,8 @@
           :class="{ last_played: !isPlaying }"
         ></div>
       </div>
-      <div>
+      <div @mouseover="showToolTip" @mouseleave="hideToolTip">
-        <div class="title ellip" @click="emitUpdate(track)">
+        <div class="title ellip" @click="emitUpdate(track)" ref="artisttitle">
           {{ track.title }}
         </div>
         <div class="isSmallArtists" style="display: none">
@@ -30,6 +30,9 @@
             :albumartist="track.albumartist"
           />
         </div>
+        <div class="tooltip" ref="tooltip">
+          {{ track.title }}
+        </div>
       </div>
     </div>
     <div class="song-artists">
@@ -61,6 +64,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { createPopper } from "@popperjs/core";
 
 import OptionSvg from "@/assets/icons/more.svg";
 
@@ -74,6 +78,9 @@ const context_on = ref(false);
 const imguri = paths.images.thumb;
 const options_button_clicked = ref(false);
 
+const artisttitle = ref<HTMLElement | null>(null);
+const tooltip = ref<HTMLElement | null>(null);
+
 const props = defineProps<{
   track: Track;
   index?: number;
@@ -92,6 +99,38 @@ function emitUpdate(track: Track) {
 function showMenu(e: Event) {
   showContext(e, props.track, options_button_clicked);
 }
+
+let isHovering = false;
+
+function showToolTip() {
+  isHovering = true;
+
+  setTimeout(() => {
+    if (isHovering) {
+      const ttip = tooltip.value as HTMLElement;
+      const atitle = artisttitle.value as HTMLElement;
+
+      ttip.style.display = "unset";
+
+      createPopper(atitle, ttip, {
+        placement: "top",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [10, 10],
+            },
+          },
+        ],
+      });
+    }
+  }, 500);
+}
+
+function hideToolTip() {
+  (tooltip.value as HTMLElement).style.display = "none";
+  isHovering = false;
+}
 </script>
 
 <style lang="scss">
@@ -104,6 +143,17 @@ function showMenu(e: Event) {
   gap: 1rem;
   user-select: none;
 
+  .tooltip {
+    background-color: $darkestblue;
+    border-radius: $smaller;
+    padding: $smaller;
+    font-size: 0.85rem;
+    display: none;
+    position: absolute;
+    margin: 1rem;
+    z-index: 300;
+  }
+
   &:hover {
     background-color: $gray4;
 

src/views/PlaylistList.vue

@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import PlaylistCard from "@/components/PlaylistsList/PlaylistCard.vue";
 
-import NewPlaylistCard from "@/components/PlaylistsList/NewPlaylistCard.vue";
+// import NewPlaylistCard from "@/components/PlaylistsList/NewPlaylistCard.vue";
 import usePStore from "@/stores/pages/playlists";
 const pStore = usePStore();
 </script>

yarn.lock

@@ -36,6 +36,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@popperjs/core@^2.11.6":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"