handle tooltip text updates

src/assets/scss/Global/app-grid.scss

@@ -53,7 +53,6 @@
 
 #acontent {
   grid-area: content;
-  max-width: 1955px;
   overflow: hidden scroll;
   margin-right: -1rem;
   padding-right: calc($medium - 1px);

src/directives/vTooltip.ts

@@ -1,4 +1,4 @@
-import { Directive } from "vue";
+import { Directive, Ref, ref } from "vue";
 import { createPopper } from "@popperjs/core";
 
 let tooltip: HTMLElement;
@@ -11,20 +11,13 @@ function hideTooltip() {
   tooltip.style.visibility = "hidden";
 }
 
-export default {
-  updated(el, binding) {
-    let isHovered = false;
-
-    if (tooltip === undefined) {
-      tooltip = getTooltip();
-    }
-
+function handleHover(el: HTMLElement, text: string, isHovered: Ref<boolean>) {
   el.addEventListener("mouseover", () => {
-      isHovered = true;
+    isHovered.value = true;
+    tooltip.innerText = text;
 
     setTimeout(() => {
-        if (isHovered) {
-          tooltip.innerText = binding.value;
+      if (isHovered.value) {
         tooltip.style.visibility = "visible";
 
         createPopper(el, tooltip, {
@@ -43,13 +36,29 @@ export default {
           ],
         });
       }
-      }, 1500);
+    }, 2000);
   });
+}
+let isHovered = ref(false);
 
-    el.addEventListener("mouseout", () => {
-      isHovered = false;
+export default {
+  state: {},
+  mounted(el: HTMLElement, binding) {
+    if (tooltip === undefined) {
+      tooltip = getTooltip();
+    }
+
+    handleHover(el, binding.value, isHovered);
+    ["mouseout", "click"].forEach((event) => {
+      el.addEventListener(event, () => {
+        isHovered.value = false;
         hideTooltip();
       });
+    });
+  },
+  updated(el, binding) {
+    el.removeEventListener("mouseover", () => {});
+    handleHover(el, binding.value, isHovered);
   },
   beforeUnmount(el: HTMLElement) {
     hideTooltip();