#311 Tooltip enhancements

src/directives/price.ts

@@ -1,6 +1,6 @@
 import { DirectiveBinding } from 'vue';
 import formatPrice from '@/helpers/format-price';
-import { CustomDirective } from '@/types/custom-directive';
+import { NamedDirective } from '@/types/named-directive';
 
 /**
  * Formats the html content of the provided element as price.
@@ -31,8 +31,7 @@ function format(el: HTMLElement, binding: DirectiveBinding): void {
  */
 export default {
   name: 'price',
-  directive: {
-    beforeMount: format,
-    updated: format,
-  },
-} as CustomDirective;
+
+  beforeMount: format,
+  updated: format,
+} satisfies NamedDirective;

src/plugins/tooltip/c-tooltip.vue

@@ -2,24 +2,29 @@
   <component
     :is="rootElement"
     :class="b()"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
+    @mouseenter="showTooltip"
+    @mouseleave="tooltipVisible = false"
   >
     <!-- @slot The slot for the tooltips anchor element(s). -->
     <slot></slot>
 
     <!-- Moves tooltip to a portal to prevent invalid HTML nesting. -->
-    <Teleport to="body">
-      <div
-        ref="tooltip"
-        :class="b('tooltip-wrapper')"
-        @load.capture="onLoad"
-      >
-        <div :class="b('tooltip')">
-          <!-- @slot This slot will be used for the tooltip content. -->
-          <slot name="tooltip"></slot>
+    <Teleport v-if="tooltipInitialized" to="body">
+      <transition :name="b('transition', { fade: true })">
+        <div
+          v-show="tooltipVisible"
+          ref="tooltip"
+          :class="b('tooltip-wrapper', { component: true })"
+          @load.capture="updatePopperInstance"
+          @mouseenter="tooltipVisible = true"
+          @mouseleave="tooltipVisible = false"
+        >
+          <div :class="b('tooltip')">
+            <!-- @slot This slot will be used for the tooltip content. -->
+            <slot name="tooltip"></slot>
+          </div>
         </div>
-      </div>
+      </transition>
     </Teleport>
   </component>
 </template>
@@ -33,9 +38,7 @@
   } from 'vue';
   import { createPopper, Instance, Options } from '@popperjs/core';
   import {
-    CLASS_TOOLTIP_WRAPPER_ACTIVE,
-    CLASS_TOOLTIP_WRAPPER_VISIBLE,
-    DEBOUNCE_CLOSE,
+    BEM_BLOCK_NAME,
     DEFAULT_POPPER_OPTIONS,
   } from '@/plugins/tooltip/shared';
 
@@ -44,23 +47,16 @@
   }
 
   interface Data {
-
-    /**
-     * Holds the component instance related popper instance.
-     */
     popperInstance: Instance | null;
-
-    /**
-     * Holds a debounce timeout for the mouseleave event.
-     */
-    mouseLeaveDebounce: ReturnType<typeof setTimeout> | null;
+    tooltipInitialized: boolean;
+    tooltipVisible: boolean;
   }
 
   /**
    * Renders a tooltip for the elements inside its slot.
    */
   export default defineComponent({
-    name: 'c-tooltip',
+    name: BEM_BLOCK_NAME,
 
     // components: {},
 
@@ -80,6 +76,14 @@
         type: String,
         default: 'div',
       },
+
+      /**
+       * Allows to disable the tooltip.
+       */
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     // emits: {},
 
@@ -93,7 +97,8 @@
     data(): Data {
       return {
         popperInstance: null,
-        mouseLeaveDebounce: null,
+        tooltipInitialized: false,
+        tooltipVisible: false,
       };
     },
 
@@ -115,25 +120,25 @@
       popperOptions(): void {
         this.popperInstance?.setOptions(this.mergedPopperOptions);
       },
+
+      /**
+       * Creates or updates the popper instance when the visibility changes.
+       */
+      tooltipVisible(visible): void {
+        this.createPopperInstance();
+        this.enableEventListeners(visible);
+      },
     },
 
     // beforeCreate() {},
     // created() {},
     // beforeMount() {},
-    mounted() {
-      setTimeout(() => { // Delay popper create, since it won't be visible initially anyway.
-        this.createPopperInstance();
-      }, 500);
-    },
+    // mounted() {},
     // beforeUpdate() {},
     // updated() {},
     // activated() {},
     // deactivated() {},
     beforeUnmount() {
-      const { tooltip } = this;
-
-      tooltip?.removeEventListener('mouseenter', this.clearDebounce);
-      tooltip?.removeEventListener('mouseleave', this.onMouseLeave);
       this.popperInstance?.destroy();
     },
     // unmounted() {},
@@ -143,27 +148,15 @@
        * Creates a new popper instance for the current component instance.
        */
       createPopperInstance(): void {
-        const { tooltip } = this;
+        const { tooltip, popperInstance } = this;
 
-        if (!tooltip) {
+        if (popperInstance || !tooltip) {
           return;
         }
 
-        tooltip.addEventListener('mouseenter', this.clearDebounce);
-        tooltip.addEventListener('mouseleave', this.onMouseLeave);
-
         this.popperInstance = createPopper(this.$el, this.tooltip, this.mergedPopperOptions);
       },
 
-      /**
-       * Clears the mouseLeaveDebounce for the tooltip.
-       */
-      clearDebounce(): void {
-        if (this.mouseLeaveDebounce) {
-          clearTimeout(this.mouseLeaveDebounce);
-        }
-      },
-
       /**
        * Enables the event listener for the popper instance.
        */
@@ -172,50 +165,30 @@
           ...options,
           modifiers: [
             ...options.modifiers || [],
-            { name: 'eventListeners', enabled },
+            { name: 'eventListeners', enabled }, // Auto observes scroll and resize events.
           ],
         }));
       },
 
       /**
        * Handles the mouseenter event of the toggle.
        */
-      onMouseEnter(): void {
-        const { tooltip } = this;
+      showTooltip(): void {
+        if (this.disabled) {
+          return;
+        }
 
-        this.clearDebounce();
-        this.enableEventListeners();
-        this.popperInstance?.update();
-        tooltip?.classList.add(CLASS_TOOLTIP_WRAPPER_ACTIVE);
+        this.tooltipInitialized = true;
 
         this.$nextTick(() => {
-          tooltip?.classList.add(CLASS_TOOLTIP_WRAPPER_VISIBLE);
+          this.tooltipVisible = true;
         });
       },
 
-      /**
-       * Handles the mouseleave event of the toggle.
-       */
-      onMouseLeave(): void {
-        this.clearDebounce();
-
-        this.mouseLeaveDebounce = setTimeout(() => {
-          const { tooltip } = this;
-
-          tooltip.addEventListener('transitionend', () => {
-            tooltip?.classList.remove(CLASS_TOOLTIP_WRAPPER_ACTIVE);
-          }, { once: true });
-
-          tooltip?.classList.remove(CLASS_TOOLTIP_WRAPPER_VISIBLE);
-
-          this.enableEventListeners(false);
-        }, DEBOUNCE_CLOSE);
-      },
-
       /**
        * Refreshes the popper if images did load inside of it.
        */
-      onLoad(): void {
+      updatePopperInstance(): void {
         this.popperInstance?.update();
       },
     },