v7.0.1

.npmignore

@@ -1,5 +1,6 @@
 .yarn
 .editorconfig
+.gitattributes
 .pnp.cjs
 .pnp.loader.mjs
 .prettierrc

.yarnrc.yml

@@ -1,5 +1,3 @@
-compressionLevel: mixed
-
 enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-4.5.3.cjs
+yarnPath: .yarn/releases/yarn-4.14.1.cjs

CHANGELOG.md

@@ -0,0 +1,58 @@
+## v7.0.1
+
+-   Исправление работы анимации
+
+## 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`
+-   Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
+-   Исправлены ошибки с позиционированием, анимацией и стилями
+-   Оптимизировано управление событиями и очистка ресурсов
+
+## v3.0.1
+
+-   Исправлена работа событий
+
+## v3.0.0
+
+-   Исправлено название опции с `virtialReference` на `virtualReference`
+
+## v2.1.0
+
+-   Для опции `appendTo` добавлена возможность указать значение `parent`
+
+## v2.0.0
+
+-   К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
+-   Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
+-   Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
+-   Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
+-   Опция `_tooltip._options` переименована в `_tooltip.options`
+-   Оптимизция кода, исправление ошибок
+-   Доработки по README.md
+-   Доработки по .npmignore
+
+## v1.0.0

README.md

@@ -22,12 +22,16 @@ import { createTooltip } from '@advdominion/tooltip';
 createTooltip(document.querySelector('button'), 'Подсказка');
 ```
 
-#### Все настройки со значениями по-умолчанию
+#### Все настройки со значениями по умолчанию
 
 ```js
 import { createTooltip } from '@advdominion/tooltip';
 
 createTooltip(document.querySelector('button'), 'Подсказка', {
+    animation: [
+        [{ opacity: 0 }, { opacity: 1 }],
+        [{ opacity: 1 }, { opacity: 0 }],
+    ],
     appendTo: document.body,
     arrow: true,
     delay: [0, 0],
@@ -37,11 +41,12 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
     interactive: true,
     offset: [0, 8],
     placement: 'top',
+    shiftPadding: [8, 0],
     theme: 'light',
-    trigger: 'mouseenter',
+    trigger: 'mouseenter click',
-    virtialReference: undefined,
+    virtualReference: undefined,
     zIndex: '',
-    // Callback-функции, по-умолчанию не заданы
+    // Callback-функции, по умолчанию не заданы
     onCreate(instance) {},
     onMount(instance) {},
     onShow(instance) {},
@@ -51,7 +56,13 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 });
 ```
 
-##### virtialReference
+#### hideOnClick
+
+- `true` (по умолчанию) — всплывающая подсказка скрывается при клике по любому элементу на странице (**кроме** самой всплывающей подсказки).
+- `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
+- `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.
+
+##### virtualReference
 
 Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
 
@@ -59,7 +70,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 
 ```js
 createTooltip(document.querySelector('button'), 'Подсказка', {
-    virtialReference: {
+    virtualReference: {
         getBoundingClientRect() {
             return {
                 x: 0,
@@ -76,8 +87,34 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 });
 ```
 
+#### Свойства
+
+#### $tooltip
+
+DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)
+
+#### options
+
+Текущие настройки
+
+#### isVisible
+
+Видимость всплывающей подсказки - `true`/`false`
+
 #### Методы
 
+##### show
+
+```js
+document.querySelector('button')._tooltip.show();
+```
+
+##### hide
+
+```js
+document.querySelector('button')._tooltip.hide();
+```
+
 ##### setContent
 
 ```js
@@ -96,6 +133,12 @@ document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' })
 <button type="button" data-tooltip-placement="bottom">Кнопка</button>
 ```
 
+##### destroy
+
+```js
+document.querySelector('button')._tooltip.destroy();
+```
+
 ### Стили
 
 ```scss
@@ -113,6 +156,9 @@ $b: '.tooltip';
         max-width: 300px;
     }
 
+    &__root {
+    }
+
     &__arrow {
         #{$b}_theme_light & {
             background-color: white;

index.js

@@ -3,154 +3,184 @@ const roundByDPR = (value) => {
     return Math.round(value * dpr) / dpr;
 };
 
+const attributeToOption = (attribute) => {
+    attribute = attribute.replace('tooltip', '');
+    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: [
+            [{ opacity: 0 }, { opacity: 1 }],
+            [{ opacity: 1 }, { opacity: 0 }],
+        ],
         appendTo: document.body,
         arrow: true,
         delay: [0, 0],
         duration: [0, 0],
         easing: ['linear', 'linear'],
-        hideOnClick: true,
+        hideOnClick: true, // Возможные значения: true, 'all', 'toggle'
         interactive: true,
         offset: [0, 8],
         placement: 'top',
+        shiftPadding: [8, 0],
         theme: 'light',
-        trigger: 'mouseenter',
+        trigger: 'mouseenter click',
-        virtialReference: undefined,
+        virtualReference: undefined,
         zIndex: '',
         ...options,
     };
 
-    if ($el.dataset.tooltipArrow !== undefined) {
+    for (const [key, value] of Object.entries($el.dataset)) {
-        options.arrow = $el.dataset.tooltipArrow === 'true';
+        if (key.startsWith('tooltip')) {
-    }
+            let parsedValue = value;
-
+            try {
-    if ($el.dataset.tooltipHideOnClick !== undefined) {
+                parsedValue = JSON.parse(value);
-        switch ($el.dataset.tooltipHideOnClick) {
+            } catch {} // eslint-disable-line no-empty
-            case 'all':
+            options[attributeToOption(key)] = parsedValue;
-            case 'toggle': {
-                options.hideOnClick = $el.dataset.tooltipHideOnClick;
-                break;
-            }
-            default: {
-                options.hideOnClick = $el.dataset.tooltipHideOnClick === 'true';
-            }
         }
     }
 
-    if ($el.dataset.tooltipInteractive !== undefined) {
+    let rafId;
-        options.interactive = $el.dataset.tooltipInteractive === 'true';
-    }
-
-    if ($el.dataset.tooltipOffset !== undefined) {
-        options.offset = JSON.parse($el.dataset.tooltipOffset);
-    }
-
-    if ($el.dataset.tooltipPlacement !== undefined) {
-        options.placement = $el.dataset.tooltipPlacement;
-    }
-
-    if ($el.dataset.tooltipTheme !== undefined) {
-        options.theme = $el.dataset.tooltipTheme;
-    }
-
-    if ($el.dataset.tooltipTrigger !== undefined) {
-        options.trigger = $el.dataset.tooltipTrigger;
-    }
-
-    if ($el.dataset.tooltipZIndex !== undefined) {
-        options.zIndex = $el.dataset.tooltipZIndex;
-    }
-
-    let showTimeout;
-    let hideTimeout;
-
-    let autoUpdateCleanup = new Function();
     const listeners = [];
 
     $el._tooltip = {
-        _options: options,
+        options,
         isVisible: false,
+        $tooltip: undefined,
+        $container: undefined,
+        $arrow: undefined,
+        $interactive: undefined,
+        _showTimeout: undefined,
+        _hideTimeout: undefined,
+        _currentAnimation: undefined,
+        autoUpdateCleanup: () => {},
+        updatePosition: async () => {},
+
         setContent(updatedContent) {
             if (updatedContent !== undefined) {
                 content = updatedContent;
             }
-            if ($el._tooltip.$tooltip) {
+            if ($el._tooltip.$container) {
-                const $container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
                 if (content instanceof HTMLElement) {
-                    $container.innerHTML = '';
+                    $el._tooltip.$container.innerHTML = '';
-                    $container.append(content);
+                    $el._tooltip.$container.append(content);
                 } else {
-                    $container.innerHTML = content;
+                    $el._tooltip.$container.innerHTML = content;
                 }
             }
         },
+
         async updateOptions(updatedOptions = {}) {
             for (const [name, value] of Object.entries(updatedOptions)) {
                 options[name] = value;
             }
+
             if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
                 if (options.arrow) {
-                    if (!$el._tooltip.$tooltip.querySelector('.tooltip__arrow')) {
+                    if (!$el._tooltip.$arrow) {
-                        $el._tooltip.$tooltip.insertAdjacentHTML(
+                        $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.arrow());
-                            'afterbegin',
+                        $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
-                            `
-                                <div
-                                    class="tooltip__arrow"
-                                    style="pointer-events: none; position: absolute; transform: rotate(45deg);">
-                                </div>
-                            `,
-                        );
                     }
                 } else {
-                    $el._tooltip.$tooltip.querySelector('.tooltip__arrow')?.remove();
+                    $el._tooltip.$arrow?.remove();
+                    $el._tooltip.$arrow = undefined;
                 }
             }
+
             if (updatedOptions.interactive !== undefined) {
                 for (const { el, event, listener } of listeners) {
                     el.removeEventListener(event, listener);
                 }
+                listeners.length = 0;
                 registerListeners();
                 if ($el._tooltip.$tooltip) {
                     if (options.interactive) {
-                        if (!$el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper')) {
+                        if (!$el._tooltip.$interactive) {
-                            $el._tooltip.$tooltip.insertAdjacentHTML(
+                            $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.interactiveHelper());
-                                'afterbegin',
+                            $el._tooltip.$interactive =
-                                `
+                                $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
-                                    <div
-                                        class="tooltip__interactive-helper"
-                                        style="position: absolute; z-index; -1;">
-                                    </div>
-                                `,
-                            );
                         }
                     } else {
-                        $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper')?.remove();
+                        $el._tooltip.$interactive?.remove();
+                        $el._tooltip.$interactive = undefined;
                     }
                 }
             }
+
             if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
                 const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
                     className.startsWith('tooltip_theme_'),
                 );
+                if (classIndex === -1) {
+                    $el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
+                } else {
                     $el._tooltip.$tooltip.classList.replace(
                         $el._tooltip.$tooltip.classList[classIndex],
                         `tooltip_theme_${options.theme}`,
                     );
                 }
+            }
+
             if (updatedOptions.zIndex !== undefined && $el._tooltip.$tooltip) {
                 Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
             }
+
             if ($el._tooltip.$tooltip) {
                 await $el._tooltip.updatePosition();
             }
         },
+
         destroy() {
+            if (!$el._tooltip) {
+                return;
+            }
+
+            clearTimeout($el._tooltip._showTimeout);
+            clearTimeout($el._tooltip._hideTimeout);
+            $el._tooltip._currentAnimation?.cancel();
+            cancelAnimationFrame(rafId);
+
             $el._tooltip.$tooltip?.remove();
-            autoUpdateCleanup();
+
+            // Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
+            if ($el._tooltip.isVisible) {
+                $el._tooltip.autoUpdateCleanup();
+            }
+
             for (const { el, event, listener } of listeners) {
                 el.removeEventListener(event, listener);
             }
+            listeners.length = 0;
+
+            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
             delete $el._tooltip;
         },
     };
@@ -159,36 +189,51 @@ export const createTooltip = ($el, content, options) => {
         options.onCreate($el._tooltip);
     }
 
-    $el._tooltip.show = async () => {
+    $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');
 
             $el._tooltip.$tooltip = document.createElement('div');
-            $el._tooltip.updatePosition = async () => {
+            $el._tooltip.$tooltip._reference = $el;
-                const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
+            Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
 
+            $el._tooltip.$tooltip.innerHTML = `
+                <div class="tooltip__root">
+                    ${options.interactive ? templates.interactiveHelper() : ''}
+                    ${options.arrow ? templates.arrow() : ''}
+                    <div class="tooltip__container"></div>
+                </div>
+            `;
+
+            $el._tooltip.$container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
+            $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            $el._tooltip.$interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+
+            $el._tooltip.setContent();
+
+            $el._tooltip.updatePosition = () => {
+                cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(async () => {
                     const { x, y, placement, middlewareData } = await computePosition(
-                    options.virtialReference ?? $el,
+                        options.virtualReference ?? $el,
                         $el._tooltip.$tooltip,
                         {
                             placement: options.placement,
                             middleware: [
-                            offset({
+                                offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
-                                mainAxis: options.offset[1],
-                                crossAxis: options.offset[0],
-                            }),
                                 flip(),
-                            shift(),
+                                shift({
-                            arrow({
+                                    padding: {
-                                element: $arrow,
+                                        top: options.shiftPadding[1],
-                                padding: Number.parseInt(
+                                        right: options.shiftPadding[0],
-                                    getComputedStyle($el._tooltip.$tooltip.querySelector('.tooltip__container'))[
+                                        bottom: options.shiftPadding[1],
-                                        'border-radius'
+                                        left: options.shiftPadding[0],
-                                    ],
+                                    },
-                                ),
                                 }),
+                                arrow({ element: $el._tooltip.$arrow }),
                             ],
                         },
                     );
@@ -198,12 +243,7 @@ export const createTooltip = ($el, content, options) => {
                     });
 
                     const side = placement.split('-')[0];
-                const staticSide = {
+                    const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
-                    top: 'bottom',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right',
-                }[side];
 
                     $el._tooltip.$tooltip.classList.remove(
                         'tooltip_side_top',
@@ -213,58 +253,25 @@ export const createTooltip = ($el, content, options) => {
                     );
                     $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
 
-                const $interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
+                    if ($el._tooltip.$interactive) {
-                if ($interactive) {
+                        Object.assign($el._tooltip.$interactive.style, {
-                    Object.assign($interactive.style, {
                             width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
                             height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
-                        top: '',
-                        bottom: '',
-                        left: '',
-                        right: '',
                             [staticSide]: `-${options.offset[1]}px`,
                         });
                     }
 
-                if ($arrow && middlewareData.arrow) {
+                    if ($el._tooltip.$arrow && middlewareData.arrow) {
                         const { x, y } = middlewareData.arrow;
-                    Object.assign($arrow.style, {
+                        Object.assign($el._tooltip.$arrow.style, {
                             left: x === undefined ? '' : `${x}px`,
                             top: y === undefined ? '' : `${y}px`,
-                        right: '',
+                            [staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
-                        bottom: '',
-                        [staticSide]: `-${$arrow.offsetWidth / 2}px`,
                         });
                     }
+                });
             };
 
-            $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
-            Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
-            $el._tooltip.$tooltip.innerHTML = `
-                ${
-                    options.interactive
-                        ? `
-                            <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>
-            `;
-            $el._tooltip.setContent();
-
             if (options.onMount) {
                 options.onMount($el._tooltip);
             }
@@ -272,156 +279,196 @@ export const createTooltip = ($el, content, options) => {
 
         const { autoUpdate } = await import('@floating-ui/dom');
 
-        showTimeout = setTimeout(async () => {
+        $el._tooltip._showTimeout = setTimeout(
-            if (!$el._tooltip.isVisible) {
+            async () => {
-                options.appendTo.append($el._tooltip.$tooltip);
+                const isMouseEnterTrigger = options.trigger.includes('mouseenter');
+                const isHovering = $el.matches(':hover');
+
+                // Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
+                if (
+                    !$el._tooltip ||
+                    $el._tooltip.isVisible ||
+                    (isMouseEnterTrigger && !isHovering) ||
+                    document.hidden
+                ) {
+                    return;
+                }
+
+                (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
                 $el._tooltip.isVisible = true;
-                autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+                $el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+
+                if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
+                    document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
+                    listeners.push({
+                        el: document.body,
+                        event: 'click',
+                        listener: $el._tooltip.hideOnClickListener,
+                    });
+                }
 
                 if (options.onShow) {
                     options.onShow($el._tooltip);
                 }
 
-                await $el._tooltip.$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], {
+                try {
-                    duration: options.duration[1],
+                    const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
-                    easing: options.easing[1],
+                        duration: immediately ? 0 : options.duration[0],
-                }).finished;
+                        easing: options.easing[0],
+                    });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
+                } catch {} // eslint-disable-line no-empty
 
                 if (options.onShown) {
                     options.onShown($el._tooltip);
                 }
-            }
+            },
-        }, options.delay[0]);
+            immediately ? 0 : options.delay[0],
+        );
     };
 
-    $el._tooltip.hide = () => {
+    $el._tooltip.hide = ({ immediately } = {}) => {
-        clearTimeout(showTimeout);
+        clearTimeout($el._tooltip._showTimeout);
+        $el._tooltip._hideTimeout = setTimeout(
+            async () => {
+                // Проверяем $el._tooltip на сущестование
+                if (!$el._tooltip || !$el._tooltip.isVisible) {
+                    return;
+                }
 
-        hideTimeout = setTimeout(async () => {
-            if ($el._tooltip.isVisible) {
                 if (options.onHide) {
                     options.onHide($el._tooltip);
                 }
 
-                await $el._tooltip.$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], {
+                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
-                    duration: options.duration[1],
-                    easing: options.easing[1],
-                }).finished;
 
+                try {
+                    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;
-                autoUpdateCleanup();
+                $el._tooltip.autoUpdateCleanup();
 
                 if (options.onHidden) {
                     options.onHidden($el._tooltip);
                 }
-            }
+            },
-        }, options.delay[1]);
+            immediately ? 0 : options.delay[1],
+        );
     };
 
-    const hideOnClickListener = ({ target }) => {
+    $el._tooltip.hideOnClickListener = ({ target }) => {
-        if (
+        if (!$el._tooltip.isVisible) {
-            $el._tooltip.isVisible &&
+            return;
-            (options.hideOnClick === 'all' ||
+        }
-                $el.contains(target) ||
+
-                (options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.contains(target)))
+        if (options.hideOnClick === 'all') {
-        ) {
+            $el._tooltip.hide();
-            document.body.removeEventListener('click', hideOnClickListener);
+        } else if (options.hideOnClick === 'toggle') {
+            if ($el.contains(target)) {
                 $el._tooltip.hide();
             }
+        } else {
+            // options.hideOnClick === true
+            if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
+                $el._tooltip.hide();
+            }
+        }
     };
 
-    const clickListener = () => {
+    $el._tooltip.clickListener = () => {
+        if (document.hidden) {
+            return;
+        }
         if (!$el._tooltip.isVisible) {
             $el._tooltip.show();
-            if (options.hideOnClick) {
-                setTimeout(() => {
-                    document.body.addEventListener('click', hideOnClickListener);
-                    listeners.push({
-                        el: document.body,
-                        event: 'click',
-                        listener: hideOnClickListener,
-                    });
-                });
-            }
         }
     };
 
-    const mouseEnterListener = () => {
+    $el._tooltip.mouseEnterListener = (event) => {
+        if (event.pointerType !== 'mouse' || document.hidden) {
+            return;
+        }
         $el._tooltip.show();
     };
 
-    const mouseLeaveListener = ({ relatedTarget }) => {
+    $el._tooltip.mouseLeaveListener = (event) => {
-        if (options.interactive) {
+        if (event.pointerType !== 'mouse') {
-            if ($el._tooltip.$tooltip.contains(relatedTarget)) {
+            return;
+        }
+
+        if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
             $el._tooltip.$tooltip.addEventListener(
-                    'mouseleave',
+                'pointerleave',
-                    ({ relatedTarget }) => {
+                (event) => {
-                        if (!$el.contains(relatedTarget)) {
+                    if (event.pointerType !== 'mouse') {
+                        return;
+                    }
+                    if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
                         $el._tooltip.hide();
                     }
                 },
-                    {
+                { once: true },
-                        once: true,
-                    },
             );
         } else {
             $el._tooltip.hide();
         }
-        } else {
+    };
-            $el._tooltip.hide();
+
+    $el._tooltip.focusListener = () => {
+        if (document.hidden) {
+            return;
         }
+        $el._tooltip.show();
+    };
+
+    $el._tooltip.blurListener = () => {
+        $el._tooltip.hide();
     };
 
     const registerListeners = () => {
         for (const trigger of options.trigger.split(' ')) {
             switch (trigger) {
                 case 'mouseenter': {
-                    $el.addEventListener('mouseenter', mouseEnterListener);
+                    $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
-                    listeners.push({
+                    listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
-                        el: $el,
-                        event: 'mouseenter',
-                        listener: mouseEnterListener,
-                    });
-
-                    $el.addEventListener('mouseleave', mouseLeaveListener);
-                    listeners.push({
-                        el: $el,
-                        event: 'mouseleave',
-                        listener: mouseLeaveListener,
-                    });
 
+                    $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                    listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
                     break;
                 }
                 case 'click': {
-                    $el.addEventListener('click', clickListener);
+                    $el.addEventListener('click', $el._tooltip.clickListener);
-                    listeners.push({
+                    listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
-                        el: $el,
-                        event: 'click',
-                        listener: clickListener,
-                    });
 
                     if (!options.interactive) {
-                        $el.addEventListener('mouseleave', mouseLeaveListener);
+                        $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
-                        listeners.push({
+                        listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
-                            el: $el,
-                            event: 'mouseleave',
-                            listener: mouseLeaveListener,
-                        });
                     }
-
                     break;
                 }
-                case 'manual': {
+                case 'focus': {
-                    if (options.hideOnClick) {
+                    $el.addEventListener('focus', $el._tooltip.focusListener);
-                        document.body.addEventListener('click', hideOnClickListener);
+                    listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
-                        listeners.push({
+                    break;
-                            el: document.body,
-                            event: 'click',
-                            listener: hideOnClickListener,
-                        });
                 }
-
+                case 'blur': {
+                    $el.addEventListener('blur', $el._tooltip.blurListener);
+                    listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
                     break;
                 }
             }
@@ -429,4 +476,9 @@ export const createTooltip = ($el, content, options) => {
     };
 
     registerListeners();
+
+    if (!visibilityListenerRegistered) {
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        visibilityListenerRegistered = true;
+    }
 };

package.json

@@ -1,8 +1,8 @@
 {
     "name": "@advdominion/tooltip",
-    "version": "1.0.0",
+    "version": "7.0.1",
     "type": "module",
-    "packageManager": "yarn@4.5.3",
+    "packageManager": "yarn@4.14.1",
     "main": "index.js",
     "repository": {
         "type": "git",