@avakhula/ui 0.0.127 → 0.0.129

package/package.json

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

package/src/App.vue

@@ -1,12 +1,20 @@
 <template>
   <div id="test">
-    <ib-input v-tooltip="'test'" readonly />
+    <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>
 
 <script>
 import IbInput from "./components/Form/Input/Input.vue";
-import { TooltipDirective as Tooltip } from "./index";
+import { IbFormGroup, IbLabel, TooltipDirective as Tooltip } from "./index";
 export default {
   directives: {
     Tooltip
@@ -21,6 +29,8 @@ export default {
   },
   components: {
     IbInput,
+    IbFormGroup,
+    IbLabel
   },
 };
 </script>

package/src/directives/tooltip/tooltip.js

@@ -8,7 +8,6 @@ const createTooltip = (el, binding) => {
 };
 
 const destroyTooltip = (event, el) => {
-  console.log(destroyTooltip)
   const tooltipContainer = tooltip.getTooltipContainer();
 
   const isMouseOverEl = el !== event.target && !el.contains(event.target);
@@ -16,11 +15,8 @@ const destroyTooltip = (event, el) => {
     tooltipContainer !== event.target &&
     !tooltipContainer?.contains(event.target);
 
-    console.log(el, event.target, isMouseOverEl, "isMouseOverEl")
-    console.log(tooltipContainer, event.target, isMouseOverTooltip, "isMouseOverTooltip")
-
-
-    if (isMouseOverEl && isMouseOverTooltip) {
+  console.log(el.contains(event.target))
+  if (isMouseOverEl && isMouseOverTooltip) {
     tooltip.destroyTooltip();
   }
 };