.npmignore

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

CHANGELOG.md

@@ -1,24 +0,0 @@
-## 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

@@ -28,10 +28,6 @@ createTooltip(document.querySelector('button'), 'Подсказка');
 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],
@@ -41,10 +37,9 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
     interactive: true,
     offset: [0, 8],
     placement: 'top',
-    shiftPadding: [8, 0],
     theme: 'light',
     trigger: 'mouseenter',
-    virtualReference: undefined,
+    virtialReference: undefined,
     zIndex: '',
     // Callback-функции, по-умолчанию не заданы
     onCreate(instance) {},
@@ -56,7 +51,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 });
 ```
 
-##### virtualReference
+##### virtialReference
 
 Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
 
@@ -64,7 +59,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 
 ```js
 createTooltip(document.querySelector('button'), 'Подсказка', {
-    virtualReference: {
+    virtialReference: {
         getBoundingClientRect() {
             return {
                 x: 0,
@@ -81,34 +76,8 @@ 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
@@ -127,12 +96,6 @@ document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' })
 <button type="button" data-tooltip-placement="bottom">Кнопка</button>
 ```
 
-##### destroy
-
-```js
-document.querySelector('button')._tooltip.destroy();
-```
-
 ### Стили
 
 ```scss
@@ -150,9 +113,6 @@ $b: '.tooltip';
         max-width: 300px;
     }
 
-    &__root {
-    }
-
     &__arrow {
         #{$b}_theme_light & {
             background-color: white;

index.js

@@ -3,58 +3,64 @@ 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, // Возможные значения: true, 'all', 'trigger'
+        hideOnClick: true,
         interactive: true,
         offset: [0, 8],
         placement: 'top',
-        shiftPadding: [8, 0],
         theme: 'light',
         trigger: 'mouseenter',
-        virtualReference: undefined,
+        virtialReference: undefined,
         zIndex: '',
         ...options,
     };
 
-    const setOptionFromDataAttribute = (attribute) => {
+    if ($el.dataset.tooltipArrow !== undefined) {
-        if ($el.dataset[attribute] !== undefined) {
+        options.arrow = $el.dataset.tooltipArrow === 'true';
-            let value = $el.dataset[attribute];
-            try {
-                value = JSON.parse($el.dataset[attribute]);
-            } catch {}
-            options[attributeToOption(attribute)] = value;
     }
-    };
 
-    setOptionFromDataAttribute('tooltipAnimation');
+    if ($el.dataset.tooltipHideOnClick !== undefined) {
-    setOptionFromDataAttribute('tooltipAppendTo');
+        switch ($el.dataset.tooltipHideOnClick) {
-    setOptionFromDataAttribute('tooltipArrow');
+            case 'all':
-    setOptionFromDataAttribute('tooltipDelay');
+            case 'toggle': {
-    setOptionFromDataAttribute('tooltipDuration');
+                options.hideOnClick = $el.dataset.tooltipHideOnClick;
-    setOptionFromDataAttribute('tooltipEasing');
+                break;
-    setOptionFromDataAttribute('tooltipHideOnClick');
+            }
-    setOptionFromDataAttribute('tooltipInteractive');
+            default: {
-    setOptionFromDataAttribute('tooltipOffset');
+                options.hideOnClick = $el.dataset.tooltipHideOnClick === 'true';
-    setOptionFromDataAttribute('tooltipPlacement');
+            }
-    setOptionFromDataAttribute('tooltipShiftPadding');
+        }
-    setOptionFromDataAttribute('tooltipTheme');
+    }
-    setOptionFromDataAttribute('tooltipTrigger');
+
-    setOptionFromDataAttribute('tooltipZIndex');
+    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;
@@ -63,7 +69,7 @@ export const createTooltip = ($el, content, options) => {
     const listeners = [];
 
     $el._tooltip = {
-        options,
+        _options: options,
         isVisible: false,
         setContent(updatedContent) {
             if (updatedContent !== undefined) {
@@ -153,21 +159,18 @@ export const createTooltip = ($el, content, options) => {
         options.onCreate($el._tooltip);
     }
 
-    $el._tooltip.show = async (params = {}) => {
+    $el._tooltip.show = async () => {
-        const { immediately } = params;
-
         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.$tooltip._reference = $el;
             $el._tooltip.updatePosition = async () => {
                 const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
 
                 const { x, y, placement, middlewareData } = await computePosition(
-                    options.virtualReference ?? $el,
+                    options.virtialReference ?? $el,
                     $el._tooltip.$tooltip,
                     {
                         placement: options.placement,
@@ -177,14 +180,7 @@ export const createTooltip = ($el, content, options) => {
                                 crossAxis: options.offset[0],
                             }),
                             flip(),
-                            shift({
+                            shift(),
-                                padding: {
-                                    top: options.shiftPadding[1],
-                                    right: options.shiftPadding[0],
-                                    bottom: options.shiftPadding[1],
-                                    left: options.shiftPadding[0],
-                                },
-                            }),
                             arrow({
                                 element: $arrow,
                                 padding: Number.parseInt(
@@ -245,7 +241,6 @@ export const createTooltip = ($el, content, options) => {
             $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
                         ? `
@@ -267,7 +262,6 @@ export const createTooltip = ($el, content, options) => {
                         : ''
                 }
                 <div class="tooltip__container"></div>
-                </div>
             `;
             $el._tooltip.setContent();
 
@@ -278,61 +272,39 @@ export const createTooltip = ($el, content, options) => {
 
         const { autoUpdate } = await import('@floating-ui/dom');
 
-        showTimeout = setTimeout(
+        showTimeout = setTimeout(async () => {
-            async () => {
             if (!$el._tooltip.isVisible) {
-                    if (options.appendTo === 'parent') {
-                        $el.parentElement.append($el._tooltip.$tooltip);
-                    } else {
                 options.appendTo.append($el._tooltip.$tooltip);
-                    }
                 $el._tooltip.isVisible = true;
                 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.querySelector('.tooltip__root').animate(options.animation[0], {
+                await $el._tooltip.$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], {
-                        duration: immediately ? 0 : options.duration[0],
+                    duration: options.duration[1],
-                        easing: options.easing[0],
+                    easing: options.easing[1],
                 }).finished;
 
                 if (options.onShown) {
                     options.onShown($el._tooltip);
                 }
             }
-            },
+        }, options.delay[0]);
-            immediately ? 0 : options.delay[0],
-        );
     };
 
-    $el._tooltip.hide = (params = {}) => {
+    $el._tooltip.hide = () => {
-        const { immediately } = params;
-
         clearTimeout(showTimeout);
 
-        hideTimeout = setTimeout(
+        hideTimeout = setTimeout(async () => {
-            async () => {
             if ($el._tooltip.isVisible) {
                 if (options.onHide) {
                     options.onHide($el._tooltip);
                 }
 
-                    await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
+                await $el._tooltip.$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], {
-                        duration: immediately ? 0 : options.duration[1],
+                    duration: options.duration[1],
                     easing: options.easing[1],
                 }).finished;
 
@@ -344,34 +316,42 @@ export const createTooltip = ($el, content, options) => {
                     options.onHidden($el._tooltip);
                 }
             }
-            },
+        }, options.delay[1]);
-            immediately ? 0 : options.delay[1],
-        );
     };
 
-    $el._tooltip.hideOnClickListener = ({ target }) => {
+    const hideOnClickListener = ({ target }) => {
         if (
             $el._tooltip.isVisible &&
             (options.hideOnClick === 'all' ||
                 $el.contains(target) ||
                 (options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.contains(target)))
         ) {
-            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+            document.body.removeEventListener('click', hideOnClickListener);
             $el._tooltip.hide();
         }
     };
 
-    $el._tooltip.clickListener = () => {
+    const 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,
+                    });
+                });
+            }
         }
     };
 
-    $el._tooltip.mouseEnterListener = () => {
+    const mouseEnterListener = () => {
         $el._tooltip.show();
     };
 
-    $el._tooltip.mouseLeaveListener = ({ relatedTarget }) => {
+    const mouseLeaveListener = ({ relatedTarget }) => {
         if (options.interactive) {
             if ($el._tooltip.$tooltip.contains(relatedTarget)) {
                 $el._tooltip.$tooltip.addEventListener(
@@ -397,36 +377,48 @@ 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('mouseenter', mouseEnterListener);
                     listeners.push({
                         el: $el,
                         event: 'mouseenter',
-                        listener: $el._tooltip.mouseEnterListener,
+                        listener: mouseEnterListener,
                     });
 
-                    $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
+                    $el.addEventListener('mouseleave', mouseLeaveListener);
                     listeners.push({
                         el: $el,
                         event: 'mouseleave',
-                        listener: $el._tooltip.mouseLeaveListener,
+                        listener: mouseLeaveListener,
                     });
 
                     break;
                 }
                 case 'click': {
-                    $el.addEventListener('click', $el._tooltip.clickListener);
+                    $el.addEventListener('click', clickListener);
                     listeners.push({
                         el: $el,
                         event: 'click',
-                        listener: $el._tooltip.clickListener,
+                        listener: clickListener,
                     });
 
                     if (!options.interactive) {
-                        $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
+                        $el.addEventListener('mouseleave', mouseLeaveListener);
                         listeners.push({
                             el: $el,
                             event: 'mouseleave',
-                            listener: $el._tooltip.mouseLeaveListener,
+                            listener: mouseLeaveListener,
+                        });
+                    }
+
+                    break;
+                }
+                case 'manual': {
+                    if (options.hideOnClick) {
+                        document.body.addEventListener('click', hideOnClickListener);
+                        listeners.push({
+                            el: document.body,
+                            event: 'click',
+                            listener: hideOnClickListener,
                         });
                     }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@advdominion/tooltip",
-    "version": "3.0.1",
+    "version": "1.0.0",
     "type": "module",
     "packageManager": "yarn@4.5.3",
     "main": "index.js",