@avakhula/ui 0.0.213 → 0.0.215

package/src/directives/tooltip/tooltip.js

@@ -3,7 +3,8 @@ import Tooltip from "./TooltipController";
 const tooltip = new Tooltip();
 const createTooltip = (el, binding) => {
   if (!tooltip.getTooltipContainer()) {
-    tooltip.createTooltip(el, binding.value);
+    const position = Object.keys(binding.modifiers)[0] || binding.arg;
+    tooltip.createTooltip(el, binding.value, position);
   }
 };
 
@@ -26,15 +27,29 @@ const destroyTooltip = (event, el) => {
   }
 };
 
+const attachTooltipListeners = (el, binding) => {
+  el.__tooltip_create = () => createTooltip(el, binding);
+  el.__tooltip_destroy = (e) => destroyTooltip(e, el);
+
+  el.addEventListener("mouseenter", el.__tooltip_create);
+  document.addEventListener("mousemove", el.__tooltip_destroy);
+};
+
+const removeTooltipListeners = (el) => {
+  tooltip.destroyTooltip();
+  el.removeEventListener("mouseenter", el.__tooltip_create);
+  document.removeEventListener("mousemove", el.__tooltip_destroy);
+};
+
 export const TooltipDirective = {
   mounted(el, binding) {
-    el.addEventListener("mouseenter", () => createTooltip(el, binding));
-    document.addEventListener("mousemove", (e) => destroyTooltip(e, el));
+    attachTooltipListeners(el, binding);
   },
-
-  beforeUnmount(el, binding) {
-    tooltip.destroyTooltip();
-    el.removeEventListener("mouseenter", () => createTooltip(el, binding));
-    document.removeEventListener("mousemove", (e) => destroyTooltip(e, el));
+  updated(el, binding) {
+    removeTooltipListeners(el);
+    attachTooltipListeners(el, binding);
+  },
+  beforeUnmount(el) {
+    removeTooltipListeners(el);
   },
 };

package/src/directives/tooltip/tooltip.stories.js

@@ -1,4 +1,5 @@
 import IbButton from "../../components/Button/Button.vue";
+
 import { TooltipDirective } from "./tooltip";
 import readme from "./readme.mdx";
 
@@ -18,13 +19,18 @@ const Template = (args) => ({
   setup() {
     return { args };
   },
-  template: `<ib-button v-tooltip="'Tooltip Content'" v-bind="args">Hover to me</ib-button>`,
+  template: `
+    <div style="display:flex;flex-wrap:wrap;">
+      <ib-button v-tooltip="'Tooltip Content Content Content Content'" v-bind="args">Tooltip</ib-button>
+    </div>
+
+    `,
 });
 
 export const Default = Template.bind({});
 Default.decorators = [
   () => ({
     template:
-      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+      '<div style="display: flex; align-items:center; justify-content: center; width: 600px; height: auto; margin: 0 auto"><story /></div>',
   }),
 ];