replace popperjs tooltip with html title attribute

~ to reduce the amount of javascript at the cost of ugly tooltips

src/components/shared/SongItem.vue

@@ -2,7 +2,7 @@
   <div
     class="songlist-item rounded-sm"
     :class="[{ current: isCurrent }, { contexton: context_on }]"
-    @dblclick="emitUpdate(track)"
+    @dblclick.prevent="emitUpdate"
     @contextmenu.prevent="showMenu"
   >
     <div class="index t-center ellip" @dblclick.prevent.stop="() => {}">
@@ -12,7 +12,7 @@
       <HeartSvg />
     </div>
     <div class="flex">
-      <div @click="emitUpdate(track)" class="thumbnail">
+      <div @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
         <img
           loading="lazy"
           :src="imguri + track.image"
@@ -26,7 +26,7 @@
         ></div>
       </div>
       <div v-tooltip class="song-title">
-        <div class="title ellip" @click="emitUpdate(track)" ref="artisttitle">
+        <div class="title ellip" @click.pre@dblclick.prevent="emitUpdate" ref="artisttitle">
           {{ track.title }}
         </div>
         <div class="isSmallArtists" style="display: none">
@@ -95,17 +95,13 @@ const emit = defineEmits<{
   (e: "playThis"): void;
 }>();
 
-function emitUpdate(track: Track) {
+function emitUpdate() {
   emit("playThis");
 }
 
 function showMenu(e: Event) {
   showContext(e, props.track, options_button_clicked);
 }
-
-onUpdated(() => {
-  console.log(artisttitle.value);
-});
 </script>
 
 <style lang="scss">

src/directives/vTooltip.ts

@@ -1,51 +1,3 @@
-import { Directive } from "vue";
-import { createPopper, Instance, VirtualElement } from "@popperjs/core";
-
-let tooltip: HTMLElement;
-let popperInstance: Instance;
-let store: any;
-
-// @ts-ignore
-const virtualEl = {
-  getBoundingClientRect: () => new DOMRect(),
-} as VirtualElement;
-
-const getTooltip = () => document.getElementById("tooltip") as HTMLElement;
-
-function getInstance() {
-  if (tooltip && virtualEl) {
-    return createPopper(virtualEl, getTooltip(), {
-      placement: "top",
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 10],
-          },
-        },
-        {
-          name: "hide",
-          enabled: true,
-        },
-        {
-          name: "eventListeners",
-          enabled: false,
-        },
-      ],
-    });
-  }
-
-  return null;
-}
-
-function showTooltip() {
-  tooltip.style.visibility = "visible";
-}
-
-function hideTooltip() {
-  tooltip.style.visibility = "hidden";
-}
-
 function getElFullWidth(el: HTMLElement) {
   el.style.display = "inline-block";
   el.style.visibility = "hidden";
@@ -59,34 +11,10 @@ function getElFullWidth(el: HTMLElement) {
 
 export default (el: HTMLElement) => {
   const fullWidth = getElFullWidth(el.cloneNode(true) as HTMLElement);
-  if (fullWidth <= el.offsetWidth) return;
-
-  if (!tooltip) {
-    tooltip = getTooltip();
+  if (fullWidth <= el.offsetWidth) {
+    el.title = "";
+    return;
   }
 
-  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);
-  });
-
-  ["mouseout", "click"].forEach((event) => {
-    document.addEventListener(event, () => {
-      isHovered = false;
-      hideTooltip();
-    });
-  });
-};
+  el.title = el.innerText;
+};