add experimental tooltip to songitem component

src/components/shared/SongItem.vue

@@ -20,8 +20,8 @@
           :class="{ last_played: !isPlaying }"
         ></div>
       </div>
-      <div>
-        <div class="title ellip" @click="emitUpdate(track)">
+      <div @mouseover="showToolTip" @mouseleave="hideToolTip">
+        <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;