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,46 +11,55 @@ function hideTooltip() {
   tooltip.style.visibility = "hidden";
 }
 
-export default {
-  updated(el, binding) {
-    let isHovered = false;
+function handleHover(el: HTMLElement, text: string, isHovered: Ref<boolean>) {
+  el.addEventListener("mouseover", () => {
+    isHovered.value = true;
+    tooltip.innerText = text;
 
+    setTimeout(() => {
+      if (isHovered.value) {
+        tooltip.style.visibility = "visible";
+
+        createPopper(el, tooltip, {
+          placement: "top",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 10],
+              },
+            },
+            {
+              name: "hide",
+              enabled: true,
+            },
+          ],
+        });
+      }
+    }, 2000);
+  });
+}
+let isHovered = ref(false);
+
+export default {
+  state: {},
+  mounted(el: HTMLElement, binding) {
     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: [
-              {
-                name: "offset",
-                options: {
-                  offset: [0, 10],
-                },
-              },
-              {
-                name: "hide",
-                enabled: true,
-              },
-            ],
-          });
-        }
-      }, 1500);
-    });
-
-    el.addEventListener("mouseout", () => {
-      isHovered = false;
-      hideTooltip();
+    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();