Bump version

.npmignore

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

.yarnrc.yml

@@ -2,4 +2,4 @@ compressionLevel: mixed
 
 enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-4.5.3.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

CHANGELOG.md

@@ -0,0 +1,32 @@
+## 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',
-    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,95 +3,80 @@ const roundByDPR = (value) => {
     return Math.round(value * dpr) / dpr;
 };
 
+const attributeToOption = (attribute) => {
+    attribute = attribute.replace('tooltip', '');
+    return attribute.charAt(0).toLowerCase() + attribute.slice(1);
+};
+
 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',
-        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) {
-        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 rafId;
-    let autoUpdateCleanup = new Function();
     const listeners = [];
 
     $el._tooltip = {
-        _options: options,
+        options,
         isVisible: false,
+        $tooltip: undefined,
+        $container: undefined,
+        $arrow: undefined,
+        $interactive: undefined,
+        autoUpdateCleanup: () => {},
+
         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(
                             'afterbegin',
                             `
@@ -101,56 +86,82 @@ export const createTooltip = ($el, content, options) => {
                                 </div>
                             `,
                         );
+                        $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
                     }
                 } 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(
                                 'afterbegin',
                                 `
                                     <div
                                         class="tooltip__interactive-helper"
-                                        style="position: absolute; z-index; -1;">
+                                        style="position: absolute; z-index: -1;">
                                     </div>
                                 `,
                             );
+                            $el._tooltip.$interactive =
+                                $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
                         }
                     } 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_'),
                 );
-                $el._tooltip.$tooltip.classList.replace(
+                if (classIndex === -1) {
-                    $el._tooltip.$tooltip.classList[classIndex],
+                    $el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
-                    `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;
+            }
+
             $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;
+
             delete $el._tooltip;
         },
     };
@@ -159,112 +170,107 @@ export const createTooltip = ($el, content, options) => {
         options.onCreate($el._tooltip);
     }
 
-    $el._tooltip.show = async () => {
+    $el._tooltip.show = async ({ immediately } = {}) => {
         clearTimeout(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');
-
-                const { x, y, placement, middlewareData } = await computePosition(
-                    options.virtialReference ?? $el,
-                    $el._tooltip.$tooltip,
-                    {
-                        placement: options.placement,
-                        middleware: [
-                            offset({
-                                mainAxis: options.offset[1],
-                                crossAxis: options.offset[0],
-                            }),
-                            flip(),
-                            shift(),
-                            arrow({
-                                element: $arrow,
-                                padding: Number.parseInt(
-                                    getComputedStyle($el._tooltip.$tooltip.querySelector('.tooltip__container'))[
-                                        'border-radius'
-                                    ],
-                                ),
-                            }),
-                        ],
-                    },
-                );
-
-                Object.assign($el._tooltip.$tooltip.style, {
-                    transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
-                });
-
-                const side = placement.split('-')[0];
-                const staticSide = {
-                    top: 'bottom',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right',
-                }[side];
-
-                $el._tooltip.$tooltip.classList.remove(
-                    'tooltip_side_top',
-                    'tooltip_side_bottom',
-                    'tooltip_side_left',
-                    'tooltip_side_right',
-                );
-                $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
-
-                const $interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
-                if ($interactive) {
-                    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) {
-                    const { x, y } = middlewareData.arrow;
-                    Object.assign($arrow.style, {
-                        left: x === undefined ? '' : `${x}px`,
-                        top: y === undefined ? '' : `${y}px`,
-                        right: '',
-                        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 = `
-                ${
+                <div class="tooltip__root">
-                    options.interactive
+                    ${
-                        ? `
+                        options.interactive
-                            <div
+                            ? `
-                                class="tooltip__interactive-helper"
+                                <div
-                                style="position: absolute; z-index; -1;">
+                                    class="tooltip__interactive-helper"
-                            </div>
+                                    style="position: absolute; z-index: -1;">
-                        `
+                                </div>
-                        : ''
+                            `
-                }
+                            : ''
-                ${
+                    }
-                    options.arrow
+                    ${
-                        ? `
+                        options.arrow
-                            <div
+                            ? `
-                                class="tooltip__arrow"
+                                <div
-                                style="pointer-events: none; position: absolute; transform: rotate(45deg);">
+                                    class="tooltip__arrow"
-                            </div>
+                                    style="pointer-events: none; position: absolute; transform: rotate(45deg);">
-                        `
+                                </div>
-                        : ''
+                            `
-                }
+                            : ''
-                <div class="tooltip__container"></div>
+                    }
+                    <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.virtualReference ?? $el,
+                        $el._tooltip.$tooltip,
+                        {
+                            placement: options.placement,
+                            middleware: [
+                                offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
+                                flip(),
+                                shift({
+                                    padding: {
+                                        top: options.shiftPadding[1],
+                                        right: options.shiftPadding[0],
+                                        bottom: options.shiftPadding[1],
+                                        left: options.shiftPadding[0],
+                                    },
+                                }),
+                                arrow({ element: $el._tooltip.$arrow }),
+                            ],
+                        },
+                    );
+
+                    Object.assign($el._tooltip.$tooltip.style, {
+                        transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
+                    });
+
+                    const side = placement.split('-')[0];
+                    const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
+
+                    $el._tooltip.$tooltip.classList.remove(
+                        'tooltip_side_top',
+                        'tooltip_side_bottom',
+                        'tooltip_side_left',
+                        'tooltip_side_right',
+                    );
+                    $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+
+                    if ($el._tooltip.$interactive) {
+                        Object.assign($el._tooltip.$interactive.style, {
+                            width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
+                            height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
+                            [staticSide]: `-${options.offset[1]}px`,
+                        });
+                    }
+
+                    if ($el._tooltip.$arrow && middlewareData.arrow) {
+                        const { x, y } = middlewareData.arrow;
+                        Object.assign($el._tooltip.$arrow.style, {
+                            left: x === undefined ? '' : `${x}px`,
+                            top: y === undefined ? '' : `${y}px`,
+                            [staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
+                        });
+                    }
+                });
+            };
+
             if (options.onMount) {
                 options.onMount($el._tooltip);
             }
@@ -272,156 +278,167 @@ export const createTooltip = ($el, content, options) => {
 
         const { autoUpdate } = await import('@floating-ui/dom');
 
-        showTimeout = setTimeout(async () => {
+        showTimeout = setTimeout(
-            if (!$el._tooltip.isVisible) {
+            async () => {
-                options.appendTo.append($el._tooltip.$tooltip);
+                if (!$el._tooltip.isVisible) {
-                $el._tooltip.isVisible = true;
+                    (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append(
-                autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+                        $el._tooltip.$tooltip,
+                    );
+                    $el._tooltip.isVisible = true;
+                    $el._tooltip.autoUpdateCleanup = autoUpdate(
+                        $el,
+                        $el._tooltip.$tooltip,
+                        $el._tooltip.updatePosition,
+                    );
 
-                if (options.onShow) {
+                    if (
-                    options.onShow($el._tooltip);
+                        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);
+                    }
+
+                    try {
+                        await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
+                            duration: immediately ? 0 : options.duration[0],
+                            easing: options.easing[0],
+                        }).finished;
+                    } catch {} // eslint-disable-line no-empty
+
+                    if (options.onShown) {
+                        options.onShown($el._tooltip);
+                    }
                 }
-
+            },
-                await $el._tooltip.$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], {
+            immediately ? 0 : options.delay[0],
-                    duration: options.duration[1],
+        );
-                    easing: options.easing[1],
-                }).finished;
-
-                if (options.onShown) {
-                    options.onShown($el._tooltip);
-                }
-            }
-        }, options.delay[0]);
     };
 
-    $el._tooltip.hide = () => {
+    $el._tooltip.hide = ({ immediately } = {}) => {
         clearTimeout(showTimeout);
+        hideTimeout = setTimeout(
+            async () => {
+                if ($el._tooltip.isVisible) {
+                    if (options.onHide) {
+                        options.onHide($el._tooltip);
+                    }
 
-        hideTimeout = setTimeout(async () => {
+                    try {
-            if ($el._tooltip.isVisible) {
+                        await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
-                if (options.onHide) {
+                            duration: immediately ? 0 : options.duration[1],
-                    options.onHide($el._tooltip);
+                            easing: options.easing[1],
+                        }).finished;
+                    } catch {} // eslint-disable-line no-empty
+
+                    if ($el._tooltip.$tooltip) {
+                        $el._tooltip.$tooltip.remove();
+                    }
+                    $el._tooltip.isVisible = false;
+                    $el._tooltip.autoUpdateCleanup();
+
+                    if (options.onHidden) {
+                        options.onHidden($el._tooltip);
+                    }
                 }
-
+            },
-                await $el._tooltip.$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], {
+            immediately ? 0 : options.delay[1],
-                    duration: options.duration[1],
+        );
-                    easing: options.easing[1],
-                }).finished;
-
-                $el._tooltip.$tooltip.remove();
-                $el._tooltip.isVisible = false;
-                autoUpdateCleanup();
-
-                if (options.onHidden) {
-                    options.onHidden($el._tooltip);
-                }
-            }
-        }, 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') {
-        ) {
-            document.body.removeEventListener('click', hideOnClickListener);
             $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);
+            }
         }
     };
 
-    const clickListener = () => {
+    $el._tooltip.clickListener = () => {
         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 = () => {
         $el._tooltip.show();
     };
 
-    const mouseLeaveListener = ({ relatedTarget }) => {
+    $el._tooltip.mouseLeaveListener = ({ relatedTarget }) => {
-        if (options.interactive) {
+        if (options.interactive && relatedTarget && $el._tooltip.$tooltip?.contains(relatedTarget)) {
-            if ($el._tooltip.$tooltip.contains(relatedTarget)) {
+            $el._tooltip.$tooltip.addEventListener(
-                $el._tooltip.$tooltip.addEventListener(
+                'mouseleave',
-                    'mouseleave',
+                ({ relatedTarget }) => {
-                    ({ relatedTarget }) => {
+                    if (!relatedTarget || !$el.contains(relatedTarget)) {
-                        if (!$el.contains(relatedTarget)) {
+                        $el._tooltip.hide();
-                            $el._tooltip.hide();
+                    }
-                        }
+                },
-                    },
+                { once: true },
-                    {
+            );
-                        once: true,
-                    },
-                );
-            } else {
-                $el._tooltip.hide();
-            }
         } else {
             $el._tooltip.hide();
         }
     };
 
+    $el._tooltip.focusListener = () => {
+        $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('mouseenter', $el._tooltip.mouseEnterListener);
-                    listeners.push({
+                    listeners.push({ el: $el, event: 'mouseenter', listener: $el._tooltip.mouseEnterListener });
-                        el: $el,
-                        event: 'mouseenter',
-                        listener: mouseEnterListener,
-                    });
-
-                    $el.addEventListener('mouseleave', mouseLeaveListener);
-                    listeners.push({
-                        el: $el,
-                        event: 'mouseleave',
-                        listener: mouseLeaveListener,
-                    });
 
+                    $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
+                    listeners.push({ el: $el, event: 'mouseleave', 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('mouseleave', $el._tooltip.mouseLeaveListener);
-                        listeners.push({
+                        listeners.push({ el: $el, event: 'mouseleave', 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',
+                case 'blur': {
-                            listener: hideOnClickListener,
+                    $el.addEventListener('blur', $el._tooltip.blurListener);
-                        });
+                    listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
-                    }
-
                     break;
                 }
             }

package.json

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