@avakhula/ui 0.0.133 → 0.0.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.133",
+  "version": "0.0.135",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -9,6 +9,16 @@
         v-tooltip="'Cannot be edited because user info were synchronized from another LMS.'"
         readonly />
     </ib-form-group>
+
+    <ib-form-group class="form-group">
+      <ib-label for="first_name" required>
+        test
+      </ib-label>
+
+      <ib-input id="first_name" name="first_name"
+        v-tooltip="'Cannot be edited because user info were synchronized from another LMS.'"
+        readonly />
+    </ib-form-group>
   </div>
 </template>
 

package/src/directives/tooltip/TooltipController.js

@@ -1,10 +1,12 @@
 import { createApp } from "vue";
 import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import generateUID from "../../helpers/generateUID";
 
 export default class Tooltip {
   constructor() {
     this.tooltipInstance = null;
     this.tooltipContainer = null;
+    this.uuid = null;
   }
 
   getTooltipInstance() {
@@ -15,11 +17,21 @@ export default class Tooltip {
     return this.tooltipContainer;
   }
 
+  getId() {
+    return this.uuid;
+  }
+
+  generateUID() {
+    this.uuid = "tooltip_" + generateUID();
+  }
+
   createTooltip(el, text) {
     if (!text.length) {
       return;
     }
 
+    this.generateUID();
+
     const tooltipContainerStyles = `
       position: absolute;
       top: 0px;
@@ -33,12 +45,14 @@ export default class Tooltip {
     this.tooltipInstance = createApp(IbTooltip, {
       text: text,
       alwaysVisible: true,
+      for: this.uuid,
     });
 
     this.tooltipInstance.mount(this.tooltipContainer);
 
     setTimeout(() => {
       if (this.tooltipContainer?.firstChild) {
+        el.setAttribute("describedby", this.uuid);
         const { top, left, width } = el.getBoundingClientRect();
         const { width: tooltipWidth, height: tooltipHeight } =
           this.tooltipContainer.firstChild.getBoundingClientRect();
@@ -57,7 +71,9 @@ export default class Tooltip {
     }, 100);
   }
 
-  destroyTooltip() {
+  destroyTooltip(el) {
+    el?.removeAttribute("describedby");
+    this.uuid = null;
     this.tooltipInstance?.unmount();
     this.tooltipInstance = null;
     this.tooltipContainer?.remove();

package/src/directives/tooltip/tooltip.js

@@ -7,36 +7,34 @@ const createTooltip = (el, binding) => {
   }
 };
 
-// const destroyTooltip = (event, el) => {
-//   const tooltipContainer = tooltip.getTooltipContainer();
-
-//   const isMouseOverEl = el !== event.target && !el.contains(event.target);
-//   const isMouseOverTooltip =
-//     tooltipContainer !== event.target &&
-//     !tooltipContainer?.contains(event.target);
-
-//   console.log(!el.contains(event.target), event.target);
-//   if (isMouseOverEl && isMouseOverTooltip) {
-//     tooltip.destroyTooltip();
-//   }
-// };
-
-const destroyTooltip = () => {
-  tooltip.destroyTooltip();
+const destroyTooltip = (event, el) => {
+  const uuid = tooltip.getId();
+
+  if (el.getAttribute("describedby") !== uuid) {
+    return;
+  }
+
+  const tooltipContainer = tooltip.getTooltipContainer();
+
+  const isMouseOverEl = el !== event.target && !el.contains(event.target);
+  const isMouseOverTooltip =
+    tooltipContainer !== event.target &&
+    !tooltipContainer?.contains(event.target);
+
+  if (isMouseOverEl && isMouseOverTooltip) {
+    tooltip.destroyTooltip(el);
+  }
 };
 
 export const TooltipDirective = {
   mounted(el, binding) {
     el.addEventListener("mouseenter", () => createTooltip(el, binding));
-    el.addEventListener("mouseout", destroyTooltip);
-
-    // document.addEventListener("mousemove", (e) => destroyTooltip(e, el));
+    document.addEventListener("mousemove", (e) => destroyTooltip(e, el));
   },
 
   beforeUnmount(el, binding) {
     tooltip.destroyTooltip();
     el.removeEventListener("mouseenter", () => createTooltip(el, binding));
-    el.removeEventListener("mouseout", destroyTooltip);
-    // document.removeEventListener("mousemove", (e) => destroyTooltip(e, el));
+    document.removeEventListener("mousemove", (e) => destroyTooltip(e, el));
   },
 };