quasar-ui-danx 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/Utility/Popovers/InteractiveTooltip.vue

@@ -0,0 +1,49 @@
+<template>
+  <QTooltip
+      ref="tooltipBox"
+      v-model="show"
+      no-parent-event
+      class="!pointer-events-auto"
+      @mouseenter="onEnterTooltip"
+      @mouseleave="onLeaveTooltip"
+  >
+    <slot>{{ tooltip }}</slot>
+  </QTooltip>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({ tooltip: { type: String, default: '' } });
+const show = ref(false);
+const tooltipBox = ref(null);
+const isHovering = ref(false);
+const isHoveringParent = ref(false);
+onMounted(() => {
+  tooltipBox.value.$el.parentNode.addEventListener('mouseover', onEnterParent);
+  tooltipBox.value.$el.parentNode.addEventListener('mouseleave', onLeaveParent);
+});
+function onEnterParent() {
+  show.value = true;
+  isHoveringParent.value = true;
+}
+function onLeaveParent() {
+  isHoveringParent.value = false;
+  if (!show.value) return;
+
+  setTimeout(() => {
+    if (isHovering.value || isHoveringParent.value) {
+      onLeaveParent();
+    } else {
+      show.value = false;
+    }
+  }, 200);
+}
+function onEnterTooltip() {
+  isHovering.value = true;
+  show.value = true;
+}
+function onLeaveTooltip() {
+  isHovering.value = false;
+  show.value = false;
+}
+</script>

package/src/components/Utility/Popovers/index.ts

@@ -1 +1,2 @@
 export { default as PopoverMenu } from "./PopoverMenu.vue";
+export { default as InteractiveTooltip } from "./InteractiveTooltip.vue";