v3.0.1

CHANGELOG.md

@@ -1,3 +1,15 @@
+## v3.0.1
+
+- Исправлена работа событий
+
+## v3.0.0
+
+- Исправлено название опции с `virtialReference` на `virtualReference`
+
+## v2.1.0
+
+- Для опции `appendTo` добавлена возможность указать значение `parent`
+
 ## v2.0.0
 
 -   К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`

README.md

@@ -44,7 +44,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
     shiftPadding: [8, 0],
     theme: 'light',
     trigger: 'mouseenter',
-    virtialReference: undefined,
+    virtualReference: undefined,
     zIndex: '',
     // Callback-функции, по-умолчанию не заданы
     onCreate(instance) {},
@@ -56,7 +56,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 });
 ```
 
-##### virtialReference
+##### virtualReference
 
 Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
 
@@ -64,7 +64,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 
 ```js
 createTooltip(document.querySelector('button'), 'Подсказка', {
-    virtialReference: {
+    virtualReference: {
         getBoundingClientRect() {
             return {
                 x: 0,

index.js

@@ -26,7 +26,7 @@ export const createTooltip = ($el, content, options) => {
         shiftPadding: [8, 0],
         theme: 'light',
         trigger: 'mouseenter',
-        virtialReference: undefined,
+        virtualReference: undefined,
         zIndex: '',
         ...options,
     };
@@ -42,6 +42,7 @@ export const createTooltip = ($el, content, options) => {
     };
 
     setOptionFromDataAttribute('tooltipAnimation');
+    setOptionFromDataAttribute('tooltipAppendTo');
     setOptionFromDataAttribute('tooltipArrow');
     setOptionFromDataAttribute('tooltipDelay');
     setOptionFromDataAttribute('tooltipDuration');
@@ -166,7 +167,7 @@ export const createTooltip = ($el, content, options) => {
                 const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
 
                 const { x, y, placement, middlewareData } = await computePosition(
-                    options.virtialReference ?? $el,
+                    options.virtualReference ?? $el,
                     $el._tooltip.$tooltip,
                     {
                         placement: options.placement,
@@ -280,10 +281,26 @@ export const createTooltip = ($el, content, options) => {
         showTimeout = setTimeout(
             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);
                     }
@@ -332,39 +349,29 @@ export const createTooltip = ($el, content, options) => {
         );
     };
 
-    const hideOnClickListener = ({ target }) => {
+    $el._tooltip.hideOnClickListener = ({ target }) => {
         if (
             $el._tooltip.isVisible &&
             (options.hideOnClick === 'all' ||
                 $el.contains(target) ||
                 (options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.contains(target)))
         ) {
-            document.body.removeEventListener('click', hideOnClickListener);
+            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
             $el._tooltip.hide();
         }
     };
 
-    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 ($el._tooltip.$tooltip.contains(relatedTarget)) {
                 $el._tooltip.$tooltip.addEventListener(
@@ -390,48 +397,36 @@ export const createTooltip = ($el, content, options) => {
         for (const trigger of options.trigger.split(' ')) {
             switch (trigger) {
                 case 'mouseenter': {
-                    $el.addEventListener('mouseenter', mouseEnterListener);
+                    $el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener);
                     listeners.push({
                         el: $el,
                         event: 'mouseenter',
-                        listener: mouseEnterListener,
+                        listener: $el._tooltip.mouseEnterListener,
                     });
 
-                    $el.addEventListener('mouseleave', mouseLeaveListener);
+                    $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
                     listeners.push({
                         el: $el,
                         event: 'mouseleave',
-                        listener: mouseLeaveListener,
+                        listener: $el._tooltip.mouseLeaveListener,
                     });
 
                     break;
                 }
                 case 'click': {
-                    $el.addEventListener('click', clickListener);
+                    $el.addEventListener('click', $el._tooltip.clickListener);
                     listeners.push({
                         el: $el,
                         event: 'click',
-                        listener: clickListener,
+                        listener: $el._tooltip.clickListener,
                     });
 
                     if (!options.interactive) {
-                        $el.addEventListener('mouseleave', mouseLeaveListener);
+                        $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
                         listeners.push({
                             el: $el,
                             event: 'mouseleave',
-                            listener: mouseLeaveListener,
+                            listener: $el._tooltip.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": "2.0.0",
+    "version": "3.0.1",
     "type": "module",
     "packageManager": "yarn@4.5.3",
     "main": "index.js",