From 1c3998aa254770afb4e9102b3a248cb6e33831f1 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 24 Sep 2022 08:33:33 +0300
Subject: [PATCH] feat: check if text is ellipsised before attaching tooltip

---
 src/directives/vTooltip.ts | 75 +++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/directives/vTooltip.ts b/src/directives/vTooltip.ts
index b7dc4400..0fd2656a 100644
--- a/src/directives/vTooltip.ts
+++ b/src/directives/vTooltip.ts
@@ -46,41 +46,56 @@ function hideTooltip() {
   tooltip.style.visibility = "hidden";
 }
 
-export default {
-  mounted(el: HTMLElement, binding) {
-    if (!tooltip) {
-      tooltip = getTooltip();
-    }
+function getFullWidth(el: HTMLElement) {
+  // display el as inline-block to get the correct width
+  el.style.display = "inline-block";
+  el.style.visibility = "hidden";
+  document.getElementsByTagName("body")[0].appendChild(el);
+  const width = el.offsetWidth;
+  el.remove();
 
-    if (!popperInstance) {
-      popperInstance = getInstance() as Instance;
-    }
+  return width;
+}
 
-    let isHovered = false;
+export default (el: HTMLElement) => {
+  const fullWidth = getFullWidth(el.cloneNode(true) as HTMLElement);
+  if (fullWidth <= el.offsetWidth) return;
 
-    el.addEventListener("mouseover", () => {
-      isHovered = true;
+  if (!tooltip) {
+    tooltip = getTooltip();
+  }
 
-      setTimeout(() => {
-        if (!isHovered) return;
-        tooltip.innerText = el.innerText;
+  if (!popperInstance) {
+    popperInstance = getInstance() as Instance;
+  }
 
-        virtualEl.getBoundingClientRect = () => el.getBoundingClientRect();
-        popperInstance.update().then(showTooltip);
-      }, 1500);
+  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();
     });
+  });
+};
 
-    ["mouseout", "click"].forEach((event) => {
-      document.addEventListener(event, () => {
-        isHovered = false;
-        hideTooltip();
-      });
-    });
-  },
-  beforeUnmount(el: HTMLElement) {
-    hideTooltip();
+// } as Directive;
 
-    el.removeEventListener("mouseover", () => {});
-    el.removeEventListener("mouseout", () => {});
-  },
-} as Directive;
+// beforeUnmount(el: HTMLElement) {
+//   // hideTooltip();
+
+//   el.removeEventListener("mouseover", () => {});
+//   el.removeEventListener("mouseout", () => {});
+// },