fetch tooltip dom elem at a global level at vTooltip

+ remove rounded class from songlist

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="table rounded"
+    class="table"
     v-if="tracks.length"
     ref="tracklistElem"
     :class="{

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;
+    hideTooltip();
-    tooltip.style.visibility = "hidden";
 
     el.removeEventListener("mouseover", () => {});
     el.removeEventListener("mouseout", () => {});
-    
   },
 } as Directive;