From 04e29c7987b4c39700c194878f0c2f8850366840 Mon Sep 17 00:00:00 2001
From: Valentin Silyutin <i@valentinsilyutin.com>
Date: Tue, 19 May 2026 23:53:43 +0400
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3=20=D0=BA=D0=BE=D0=B4=D0=B0=20=D0=B8=20?=
 =?UTF-8?q?=D1=83=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js | 75 +++++++++++++++++++++++---------------------------------
 1 file changed, 30 insertions(+), 45 deletions(-)

diff --git a/index.js b/index.js
index 2056e74..0f3023f 100644
--- a/index.js
+++ b/index.js
@@ -25,6 +25,15 @@ const handleVisibilityChange = () => {
     }
 };
 
+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: [
@@ -70,7 +79,9 @@ export const createTooltip = ($el, content, options) => {
         $interactive: undefined,
         _showTimeout: undefined,
         _hideTimeout: undefined,
+        _currentAnimation: undefined,
         autoUpdateCleanup: () => {},
+        updatePosition: async () => {},
 
         setContent(updatedContent) {
             if (updatedContent !== undefined) {
@@ -94,15 +105,7 @@ export const createTooltip = ($el, content, options) => {
             if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
                 if (options.arrow) {
                     if (!$el._tooltip.$arrow) {
-                        $el._tooltip.$tooltip.insertAdjacentHTML(
-                            'afterbegin',
-                            `
-                                <div
-                                    class="tooltip__arrow"
-                                    style="pointer-events: none; position: absolute; transform: rotate(45deg);">
-                                </div>
-                            `,
-                        );
+                        $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.arrow());
                         $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
                     }
                 } else {
@@ -120,15 +123,7 @@ export const createTooltip = ($el, content, options) => {
                 if ($el._tooltip.$tooltip) {
                     if (options.interactive) {
                         if (!$el._tooltip.$interactive) {
-                            $el._tooltip.$tooltip.insertAdjacentHTML(
-                                'afterbegin',
-                                `
-                                    <div
-                                        class="tooltip__interactive-helper"
-                                        style="position: absolute; z-index: -1;">
-                                    </div>
-                                `,
-                            );
+                            $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.interactiveHelper());
                             $el._tooltip.$interactive =
                                 $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
                         }
@@ -169,6 +164,7 @@ export const createTooltip = ($el, content, options) => {
 
             clearTimeout($el._tooltip._showTimeout);
             clearTimeout($el._tooltip._hideTimeout);
+            $el._tooltip._currentAnimation?.cancel();
             cancelAnimationFrame(rafId);
 
             $el._tooltip.$tooltip?.remove();
@@ -183,6 +179,8 @@ export const createTooltip = ($el, content, options) => {
             }
             listeners.length = 0;
 
+            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
             delete $el._tooltip;
         },
     };
@@ -204,26 +202,8 @@ export const createTooltip = ($el, content, options) => {
 
             $el._tooltip.$tooltip.innerHTML = `
                 <div class="tooltip__root">
-                    ${
-                        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>
-                            `
-                            : ''
-                    }
+                    ${options.interactive ? templates.interactiveHelper() : ''}
+                    ${options.arrow ? templates.arrow() : ''}
                     <div class="tooltip__container"></div>
                 </div>
             `;
@@ -332,10 +312,13 @@ export const createTooltip = ($el, content, options) => {
                 }
 
                 try {
-                    await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
+                    $el._tooltip._currentAnimation?.cancel();
+                    const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
                         duration: immediately ? 0 : options.duration[0],
                         easing: options.easing[0],
-                    }).finished;
+                    });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
                 } catch {} // eslint-disable-line no-empty
 
                 if (options.onShown) {
@@ -359,11 +342,16 @@ export const createTooltip = ($el, content, options) => {
                     options.onHide($el._tooltip);
                 }
 
+                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
+
                 try {
-                    await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
+                    $el._tooltip._currentAnimation?.cancel();
+                    const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
                         duration: immediately ? 0 : options.duration[1],
                         easing: options.easing[1],
-                    }).finished;
+                    });
+                    $el._tooltip._currentAnimation = animation;
+                    await animation.finished;
                 } catch {} // eslint-disable-line no-empty
 
                 // Ещё одна проверка на сущестование $el._tooltip после await
@@ -392,17 +380,14 @@ export const createTooltip = ($el, content, options) => {
 
         if (options.hideOnClick === 'all') {
             $el._tooltip.hide();
-            document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
         } else if (options.hideOnClick === 'toggle') {
             if ($el.contains(target)) {
                 $el._tooltip.hide();
-                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
             }
         } else {
             // options.hideOnClick === true
             if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
                 $el._tooltip.hide();
-                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
             }
         }
     };