@avakhula/ui 0.0.24 → 0.0.25

package/package.json

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

package/src/App.vue

@@ -21,9 +21,16 @@
   <button @click="changeValueInProps">Change value in props</button>
 
   <ib-checkbox @input="test1" class="hello" />
+
+  <ib-button style="margin-bottom: 20px;" v-tooltip="'test'" >HOVER ME</ib-button>
+  <ib-button style="margin-bottom: 20px;" v-tooltip="'second test'" >HOVER ME</ib-button>
+
 </template>
 
 <script>
+import IbButton from "./components/Button/Button.vue"
+import { TooltipDirective as Tooltip} from "./directives/tooltip/tooltip"
+
 import IbSelect from "./components/TreeSelect/Select.vue";
 import IbCheckbox from "./components/Form/Checkbox/Checkbox.vue";
 import IbPagination from "./components/Pagination/Pagination.vue";
@@ -85,12 +92,16 @@ export default {
       test: testData[0].id,
     };
   },
+  directives: {
+    Tooltip,
+  },
   watch: {
     test(val) {
       console.log("test", val);
     },
   },
   components: {
+    IbButton,
     IbSelect,
     IbCheckbox,
     IbPagination,

package/src/directives/tooltip/tooltip.js

@@ -0,0 +1,50 @@
+// import { createApp, h } from "vue";
+import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import { createApp } from "vue";
+
+export const TooltipDirective = {
+  mounted(el, binding) {
+    let tooltipInstance = null;
+    const tooltipContainer = document.createElement("div");
+
+    el.addEventListener("mouseenter", () => {
+      const tooltipContainerStyles = `
+          position: absolute;
+          top: 0px;
+          left: 0px;
+      `;
+      tooltipContainer.setAttribute("style", tooltipContainerStyles);
+
+      document.body.appendChild(tooltipContainer);
+      tooltipInstance = createApp(IbTooltip, {
+        text: binding.value,
+      });
+
+      tooltipInstance.mount(tooltipContainer);
+      tooltipContainer.firstChild.setAttribute("style", "display: block");
+
+      setTimeout(() => {
+        if (tooltipContainer.firstChild) {
+          const { top, left, width } = el.getBoundingClientRect();
+          const { width: tooltipWidth, height: tooltipHeight } =
+            tooltipContainer.firstChild.getBoundingClientRect();
+
+          const tooltipStyles = `
+          left: ${left + width / 2 - tooltipWidth / 2}px!important;
+          top: ${top - tooltipHeight - 5}px!important;
+          bottom: auto!important;
+          right: auto!important;
+          transform: none!important;
+        `;
+
+          tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+        }
+      }, 100);
+    });
+
+    el.addEventListener("mouseleave", () => {
+      tooltipInstance.unmount();
+      document.body.removeChild(tooltipContainer);
+    });
+  },
+};

package/src/index.js

@@ -47,3 +47,4 @@ export { default as IbCheckboxCell } from "./components/Table/Cells/CheckboxCell
 
 // Directives
 export { OutsideDirective } from "./directives/outside/outside";
+export { TooltipDirective } from "./directives/tooltip/tooltip";