v7.0.0

CHANGELOG.md

@@ -1,22 +1,44 @@
+## v7.0.0
+
+-   Изменено значение по умолчанию для параметра `trigger`
+-   Рефакторинг кода и устранение ошибок
+
+## v6.0.0
+
+-   Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
+-   Предовтращаем лишние показы всплывающей подсказки
+
+## v5.0.0
+
+-   Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
+
+## v4.1.1
+
+-   Исправление зависаний (в некоторых случаях) всплывающих подсказок
+
+## v4.1.0
+
+-   Отключаем события mouseenter/mouseleave для toch-устройств
+
 ## v4.0.0
 
-- Переработана логика инициализации и обновления тултипа
+-   Переработана логика инициализации и обновления тултипа
-- Добавлены новые триггеры: `focus`, `blur`
+-   Добавлены новые триггеры: `focus`, `blur`
-- Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
+-   Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
-- Исправлены ошибки с позиционированием, анимацией и стилями
+-   Исправлены ошибки с позиционированием, анимацией и стилями
-- Оптимизировано управление событиями и очистка ресурсов
+-   Оптимизировано управление событиями и очистка ресурсов
 
 ## v3.0.1
 
-- Исправлена работа событий
+-   Исправлена работа событий
 
 ## v3.0.0
 
-- Исправлено название опции с `virtialReference` на `virtualReference`
+-   Исправлено название опции с `virtialReference` на `virtualReference`
 
 ## v2.1.0
 
-- Для опции `appendTo` добавлена возможность указать значение `parent`
+-   Для опции `appendTo` добавлена возможность указать значение `parent`
 
 ## v2.0.0
 

README.md

@@ -43,7 +43,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
     placement: 'top',
     shiftPadding: [8, 0],
     theme: 'light',
-    trigger: 'mouseenter',
+    trigger: 'mouseenter click',
     virtualReference: undefined,
     zIndex: '',
     // Callback-функции, по умолчанию не заданы

index.js

@@ -8,6 +8,32 @@ const attributeToOption = (attribute) => {
     return attribute.charAt(0).toLowerCase() + attribute.slice(1);
 };
 
+let visibilityListenerRegistered = false;
+const handleVisibilityChange = () => {
+    if (document.hidden) {
+        // Скрываем все активные всплывающие подсказки
+        for (const $tooltip of document.querySelectorAll('.tooltip')) {
+            const ref = $tooltip._reference;
+            if (ref?._tooltip) {
+                // Очищаем таймеры появления при скрытии страницы
+                clearTimeout(ref._tooltip._showTimeout);
+                if (ref._tooltip.isVisible) {
+                    ref._tooltip.hide({ immediately: true });
+                }
+            }
+        }
+    }
+};
+
+const templates = {
+    arrow: () => `
+        <div class="tooltip__arrow" style="pointer-events: none; position: absolute; transform: rotate(45deg);"></div>
+    `,
+    interactiveHelper: () => `
+        <div class="tooltip__interactive-helper" style="position: absolute; z-index: -1;"></div>
+    `,
+};
+
 export const createTooltip = ($el, content, options) => {
     options = {
         animation: [
@@ -25,7 +51,7 @@ export const createTooltip = ($el, content, options) => {
         placement: 'top',
         shiftPadding: [8, 0],
         theme: 'light',
-        trigger: 'mouseenter',
+        trigger: 'mouseenter click',
         virtualReference: undefined,
         zIndex: '',
         ...options,
@@ -41,8 +67,6 @@ export const createTooltip = ($el, content, options) => {
         }
     }
 
-    let showTimeout;
-    let hideTimeout;
     let rafId;
     const listeners = [];
 
@@ -53,7 +77,11 @@ export const createTooltip = ($el, content, options) => {
         $container: undefined,
         $arrow: undefined,
         $interactive: undefined,
+        _showTimeout: undefined,
+        _hideTimeout: undefined,
+        _currentAnimation: undefined,
         autoUpdateCleanup: () => {},
+        updatePosition: async () => {},
 
         setContent(updatedContent) {
             if (updatedContent !== undefined) {
@@ -77,15 +105,7 @@ export const createTooltip = ($el, content, options) => {
             if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
                 if (options.arrow) {
                     if (!$el._tooltip.$arrow) {
-                        $el._tooltip.$tooltip.insertAdjacentHTML(
+                        $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.arrow());
-                            'afterbegin',
-                            `
-                                <div
-                                    class="tooltip__arrow"
-                                    style="pointer-events: none; position: absolute; transform: rotate(45deg);">
-                                </div>
-                            `,
-                        );
                         $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
                     }
                 } else {
@@ -103,15 +123,7 @@ export const createTooltip = ($el, content, options) => {
                 if ($el._tooltip.$tooltip) {
                     if (options.interactive) {
                         if (!$el._tooltip.$interactive) {
-                            $el._tooltip.$tooltip.insertAdjacentHTML(
+                            $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.interactiveHelper());
-                                'afterbegin',
-                                `
-                                    <div
-                                        class="tooltip__interactive-helper"
-                                        style="position: absolute; z-index: -1;">
-                                    </div>
-                                `,
-                            );
                             $el._tooltip.$interactive =
                                 $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
                         }
@@ -150,6 +162,11 @@ export const createTooltip = ($el, content, options) => {
                 return;
             }
 
+            clearTimeout($el._tooltip._showTimeout);
+            clearTimeout($el._tooltip._hideTimeout);
+            $el._tooltip._currentAnimation?.cancel();
+            cancelAnimationFrame(rafId);
+
             $el._tooltip.$tooltip?.remove();
 
             // Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
@@ -162,6 +179,8 @@ export const createTooltip = ($el, content, options) => {
             }
             listeners.length = 0;
 
+            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
             delete $el._tooltip;
         },
     };
@@ -171,7 +190,7 @@ export const createTooltip = ($el, content, options) => {
     }
 
     $el._tooltip.show = async ({ immediately } = {}) => {
-        clearTimeout(hideTimeout);
+        clearTimeout($el._tooltip._hideTimeout);
 
         if (!$el._tooltip.$tooltip) {
             const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
@@ -183,26 +202,8 @@ export const createTooltip = ($el, content, options) => {
 
             $el._tooltip.$tooltip.innerHTML = `
                 <div class="tooltip__root">
-                    ${
+                    ${options.interactive ? templates.interactiveHelper() : ''}
-                        options.interactive
+                    ${options.arrow ? templates.arrow() : ''}
-                            ? `
-                                <div
-                                    class="tooltip__interactive-helper"
-                                    style="position: absolute; z-index: -1;">
-                                </div>
-                            `
-                            : ''
-                    }
-                    ${
-                        options.arrow
-                            ? `
-                                <div
-                                    class="tooltip__arrow"
-                                    style="pointer-events: none; position: absolute; transform: rotate(45deg);">
-                                </div>
-                            `
-                            : ''
-                    }
                     <div class="tooltip__container"></div>
                 </div>
             `;
@@ -278,45 +279,50 @@ export const createTooltip = ($el, content, options) => {
 
         const { autoUpdate } = await import('@floating-ui/dom');
 
-        showTimeout = setTimeout(
+        $el._tooltip._showTimeout = setTimeout(
             async () => {
-                if (!$el._tooltip.isVisible) {
+                const isMouseEnterTrigger = options.trigger.includes('mouseenter');
-                    (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append(
+                const isHovering = $el.matches(':hover');
-                        $el._tooltip.$tooltip,
-                    );
-                    $el._tooltip.isVisible = true;
-                    $el._tooltip.autoUpdateCleanup = autoUpdate(
-                        $el,
-                        $el._tooltip.$tooltip,
-                        $el._tooltip.updatePosition,
-                    );
 
-                    if (
+                // Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
-                        options.hideOnClick &&
+                if (
-                        (options.trigger.includes('click') || options.trigger.includes('manual'))
+                    !$el._tooltip ||
-                    ) {
+                    $el._tooltip.isVisible ||
-                        document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
+                    (isMouseEnterTrigger && !isHovering) ||
-                        listeners.push({
+                    document.hidden
-                            el: document.body,
+                ) {
-                            event: 'click',
+                    return;
-                            listener: $el._tooltip.hideOnClickListener,
+                }
-                        });
-                    }
 
-                    if (options.onShow) {
+                (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
-                        options.onShow($el._tooltip);
+                $el._tooltip.isVisible = true;
-                    }
+                $el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
 
-                    try {
+                if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
-                        await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
+                    document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
-                            duration: immediately ? 0 : options.duration[0],
+                    listeners.push({
-                            easing: options.easing[0],
+                        el: document.body,
-                        }).finished;
+                        event: 'click',
-                    } catch {} // eslint-disable-line no-empty
+                        listener: $el._tooltip.hideOnClickListener,
+                    });
+                }
 
-                    if (options.onShown) {
+                if (options.onShow) {
-                        options.onShown($el._tooltip);
+                    options.onShow($el._tooltip);
-                    }
+                }
+
+                try {
+                    $el._tooltip._currentAnimation?.cancel();
+                    const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
+                        duration: immediately ? 0 : options.duration[0],
+                        easing: options.easing[0],
+                    });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
+
+                if (options.onShown) {
+                    options.onShown($el._tooltip);
                 }
             },
             immediately ? 0 : options.delay[0],
@@ -324,30 +330,43 @@ export const createTooltip = ($el, content, options) => {
     };
 
     $el._tooltip.hide = ({ immediately } = {}) => {
-        clearTimeout(showTimeout);
+        clearTimeout($el._tooltip._showTimeout);
-        hideTimeout = setTimeout(
+        $el._tooltip._hideTimeout = setTimeout(
             async () => {
-                if ($el._tooltip.isVisible) {
+                // Проверяем $el._tooltip на сущестование
-                    if (options.onHide) {
+                if (!$el._tooltip || !$el._tooltip.isVisible) {
-                        options.onHide($el._tooltip);
+                    return;
-                    }
+                }
 
-                    try {
+                if (options.onHide) {
-                        await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
+                    options.onHide($el._tooltip);
-                            duration: immediately ? 0 : options.duration[1],
+                }
-                            easing: options.easing[1],
-                        }).finished;
-                    } catch {} // eslint-disable-line no-empty
 
-                    if ($el._tooltip.$tooltip) {
+                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
-                        $el._tooltip.$tooltip.remove();
-                    }
-                    $el._tooltip.isVisible = false;
-                    $el._tooltip.autoUpdateCleanup();
 
-                    if (options.onHidden) {
+                try {
-                        options.onHidden($el._tooltip);
+                    $el._tooltip._currentAnimation?.cancel();
-                    }
+                    const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
+                        duration: immediately ? 0 : options.duration[1],
+                        easing: options.easing[1],
+                    });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
+
+                // Ещё одна проверка на сущестование $el._tooltip после await
+                if (!$el._tooltip) {
+                    return;
+                }
+
+                if ($el._tooltip.$tooltip) {
+                    $el._tooltip.$tooltip.remove();
+                }
+                $el._tooltip.isVisible = false;
+                $el._tooltip.autoUpdateCleanup();
+
+                if (options.onHidden) {
+                    options.onHidden($el._tooltip);
                 }
             },
             immediately ? 0 : options.delay[1],
@@ -361,37 +380,47 @@ export const createTooltip = ($el, content, options) => {
 
         if (options.hideOnClick === 'all') {
             $el._tooltip.hide();
-            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
         } else if (options.hideOnClick === 'toggle') {
             if ($el.contains(target)) {
                 $el._tooltip.hide();
-                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
             }
         } else {
             // options.hideOnClick === true
             if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
                 $el._tooltip.hide();
-                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
             }
         }
     };
 
     $el._tooltip.clickListener = () => {
+        if (document.hidden) {
+            return;
+        }
         if (!$el._tooltip.isVisible) {
             $el._tooltip.show();
         }
     };
 
-    $el._tooltip.mouseEnterListener = () => {
+    $el._tooltip.mouseEnterListener = (event) => {
+        if (event.pointerType !== 'mouse' || document.hidden) {
+            return;
+        }
         $el._tooltip.show();
     };
 
-    $el._tooltip.mouseLeaveListener = ({ relatedTarget }) => {
+    $el._tooltip.mouseLeaveListener = (event) => {
-        if (options.interactive && relatedTarget && $el._tooltip.$tooltip?.contains(relatedTarget)) {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+
+        if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
             $el._tooltip.$tooltip.addEventListener(
-                'mouseleave',
+                'pointerleave',
-                ({ relatedTarget }) => {
+                (event) => {
-                    if (!relatedTarget || !$el.contains(relatedTarget)) {
+                    if (event.pointerType !== 'mouse') {
+                        return;
+                    }
+                    if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
                         $el._tooltip.hide();
                     }
                 },
@@ -403,6 +432,9 @@ export const createTooltip = ($el, content, options) => {
     };
 
     $el._tooltip.focusListener = () => {
+        if (document.hidden) {
+            return;
+        }
         $el._tooltip.show();
     };
 
@@ -414,11 +446,11 @@ export const createTooltip = ($el, content, options) => {
         for (const trigger of options.trigger.split(' ')) {
             switch (trigger) {
                 case 'mouseenter': {
-                    $el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener);
+                    $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
-                    listeners.push({ el: $el, event: 'mouseenter', listener: $el._tooltip.mouseEnterListener });
+                    listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
 
-                    $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
+                    $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
-                    listeners.push({ el: $el, event: 'mouseleave', listener: $el._tooltip.mouseLeaveListener });
+                    listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
                     break;
                 }
                 case 'click': {
@@ -426,8 +458,8 @@ export const createTooltip = ($el, content, options) => {
                     listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
 
                     if (!options.interactive) {
-                        $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
+                        $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
-                        listeners.push({ el: $el, event: 'mouseleave', listener: $el._tooltip.mouseLeaveListener });
+                        listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
                     }
                     break;
                 }
@@ -446,4 +478,9 @@ export const createTooltip = ($el, content, options) => {
     };
 
     registerListeners();
+
+    if (!visibilityListenerRegistered) {
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        visibilityListenerRegistered = true;
+    }
 };

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@advdominion/tooltip",
-    "version": "4.0.0",
+    "version": "7.0.0",
     "type": "module",
     "packageManager": "yarn@4.9.4",
     "main": "index.js",