From 70ef7091705587d7a750d4e4e00017a84879a69f Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 5 Sep 2022 23:19:39 +0300
Subject: [PATCH] fetch tooltip dom elem at a global level at vTooltip

+ remove rounded class from songlist
---
 src/components/FolderView/SongList.vue |  2 +-
 src/directives/vTooltip.ts             | 21 +++++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index e4c6fd14..41f11543 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="table rounded"
+    class="table"
     v-if="tracks.length"
     ref="tracklistElem"
     :class="{
diff --git a/src/directives/vTooltip.ts b/src/directives/vTooltip.ts
index d67d098b..6142900a 100644
--- a/src/directives/vTooltip.ts
+++ b/src/directives/vTooltip.ts
@@ -3,10 +3,21 @@ import { createPopper } from "@popperjs/core";
 
 let tooltip: HTMLElement;
 
+function getTooltip() {
+  return document.getElementById("tooltip") as HTMLElement;
+}
+
+function hideTooltip() {
+  tooltip.style.visibility = "hidden";
+}
+
 export default {
-  mounted(el, binding) {
+  updated(el, binding) {
     let isHovered = false;
-    const tooltip = document.getElementById("tooltip") as HTMLElement;
+
+    if (tooltip === undefined) {
+      tooltip = getTooltip();
+    }
 
     el.addEventListener("mouseover", () => {
       isHovered = true;
@@ -37,15 +48,13 @@ export default {
 
     el.addEventListener("mouseout", () => {
       isHovered = false;
-      tooltip.style.visibility = "hidden";
+      hideTooltip();
     });
   },
   beforeUnmount(el: HTMLElement) {
-    const tooltip = document.getElementById("tooltip") as HTMLElement;
-    tooltip.style.visibility = "hidden";
+    hideTooltip();
 
     el.removeEventListener("mouseover", () => {});
     el.removeEventListener("mouseout", () => {});
-    
   },
 } as Directive;