fix: use innerText as tooltip text instead of bindings

-
this fixes the updates problem
-

src/App.vue

@@ -25,29 +25,35 @@
 </template>
 
 <script setup lang="ts">
+// @libraries
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { onStartTyping } from "@vueuse/core";
 import { vElementSize } from "@vueuse/components";
 
+// @stores
 import useQStore from "@/stores/queue";
 import useModalStore from "@/stores/modal";
 import useContextStore from "@/stores/context";
 import useSettingsStore from "@/stores/settings";
+import { content_width } from "@/stores/content-width";
+
+// @utils
 import { xl, xxl } from "./composables/useBreakpoints";
 import handleShortcuts from "@/composables/useKeyboard";
 import { readLocalStorage, writeLocalStorage } from "@/utils";
 
+// @small-components
 import Modal from "@/components/modal.vue";
-import NavBar from "@/components/nav/NavBar.vue";
 import ContextMenu from "@/components/contextMenu.vue";
 import Notification from "@/components/Notification.vue";
 
+// @app-grid-components
+import NavBar from "@/components/nav/NavBar.vue";
+import LeftSidebar from "./components/LeftSidebar/index.vue";
 import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import NowPlayingRight from "@/components/RightSideBar/NowPlayingRight.vue";
-import LeftSidebar from "./components/LeftSidebar/index.vue";
-import { content_width } from "@/stores/content-width";
 
 const queue = useQStore();
 const router = useRouter();

src/components/AlbumView/Header.vue

@@ -25,7 +25,7 @@
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip" v-tooltip="album.title">
+          <div class="title ellip" v-tooltip>
             {{ album.title }}
           </div>
         </div>

src/components/LeftSidebar/NP/SongCard.vue

@@ -25,7 +25,7 @@
     </div>
 
     <div class="bottom">
-      <div class="title ellip t-center" v-tooltip="track?.title">
+      <div class="title ellip t-center" v-tooltip>
         {{ track?.title || "♥ Hello ♥" }}
       </div>
       <ArtistName

src/components/shared/AlbumCard.vue

@@ -8,7 +8,7 @@
   >
     <img class="rounded" :src="imguri + album.image" alt="" />
     <div>
-      <h4 class="title ellip" v-tooltip="album.title">{{ album.title }}</h4>
+      <h4 class="title ellip" v-tooltip>{{ album.title }}</h4>
       <div class="artist ellip">{{ album.artist }}</div>
     </div>
   </router-link>

src/components/shared/ArtistName.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-tooltip="returnArtists()" style="width: auto">
+  <div v-tooltip style="width: auto">
     <div class="ellip" v-if="artists === null || artists.length === 0">
       <span>{{ albumartist }}</span>
     </div>
@@ -18,11 +18,4 @@ const props = defineProps<{
   artists: string[] | null;
   albumartist: string | undefined;
 }>();
-
-function returnArtists() {
-  if (props.artists === null || props.artists.length === 0)
-    return props.albumartist;
-
-  return props.artists.join(", ");
-}
 </script>

src/components/shared/SongItem.vue

@@ -25,7 +25,7 @@
           :class="{ last_played: !isPlaying }"
         ></div>
       </div>
-      <div v-tooltip="track.title" class="song-title">
+      <div v-tooltip class="song-title">
         <div class="title ellip" @click="emitUpdate(track)" ref="artisttitle">
           {{ track.title }}
         </div>
@@ -42,7 +42,7 @@
     </div>
     <router-link
       class="song-album ellip"
-      v-tooltip="track.album"
+      v-tooltip
       :to="{
         name: 'AlbumView',
         params: {

src/components/shared/TrackItem.vue

@@ -23,7 +23,7 @@
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip" v-tooltip="track.title">
+      <div class="title ellip" v-tooltip>
         {{ track.title }}
       </div>
       <hr />

src/directives/vTooltip.ts

@@ -1,33 +1,20 @@
 import { Directive } from "vue";
-import { createPopper } from "@popperjs/core";
+import { createPopper, Instance, VirtualElement } from "@popperjs/core";
 
 let tooltip: HTMLElement;
+let popperInstance: Instance;
+let store: any;
 
-function getTooltip() {
+// @ts-ignore
-  return document.getElementById("tooltip") as HTMLElement;
+const virtualEl = {
-}
+  getBoundingClientRect: () => null,
+} as VirtualElement;
 
-function hideTooltip() {
+const getTooltip = () => document.getElementById("tooltip") as HTMLElement;
-  tooltip.style.visibility = "hidden";
-}
 
-export default {
+function getInstance() {
-  mounted(el, binding) {
+  if (tooltip && virtualEl) {
-    let isHovered = false;
+    return createPopper(virtualEl, getTooltip(), {
-
-    if (tooltip === undefined) {
-      tooltip = getTooltip();
-    }
-
-    el.addEventListener("mouseover", () => {
-      isHovered = true;
-
-      setTimeout(() => {
-        if (isHovered) {
-          tooltip.innerText = binding.value;
-          tooltip.style.visibility = "visible";
-
-          createPopper(el, tooltip, {
       placement: "top",
       modifiers: [
         {
@@ -40,9 +27,46 @@ export default {
           name: "hide",
           enabled: true,
         },
+        {
+          name: "eventListeners",
+          enabled: false,
+        },
       ],
     });
   }
+
+  return null;
+}
+
+function showTooltip() {
+  tooltip.style.visibility = "visible";
+}
+
+function hideTooltip() {
+  tooltip.style.visibility = "hidden";
+}
+
+export default {
+  mounted(el: HTMLElement, binding) {
+    if (!tooltip) {
+      tooltip = getTooltip();
+    }
+
+    if (!popperInstance) {
+      popperInstance = getInstance() as Instance;
+    }
+
+    let isHovered = false;
+
+    el.addEventListener("mouseover", () => {
+      isHovered = true;
+
+      setTimeout(() => {
+        if (!isHovered) return;
+        tooltip.innerText = el.innerText;
+
+        virtualEl.getBoundingClientRect = () => el.getBoundingClientRect();
+        popperInstance.update().then(showTooltip);
       }, 1500);
     });
 

src/main.ts

@@ -1,12 +1,13 @@
 import "./assets/scss/index.scss";
 
-import { createPinia } from "pinia";
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-import vTooltip from "./directives/vTooltip";
+
 
 import App from "./App.vue";
 import router from "./router";
+import vTooltip from "./directives/vTooltip";
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -16,4 +17,4 @@ app.use(pinia);
 app.use(router);
 app.directive("tooltip", vTooltip);
 
-app.mount("#app");
+app.mount("#app")