Предовтращаем лишние показы всплывающей подсказки

index.js

@@ -13,8 +13,13 @@ const handleVisibilityChange = () => {
     if (document.hidden) {
         // Скрываем все активные всплывающие подсказки
         for (const $tooltip of document.querySelectorAll('.tooltip')) {
-            if ($tooltip._reference?._tooltip?.isVisible) {
+            const ref = $tooltip._reference;
-                $tooltip._reference._tooltip.hide({ immediately: true });
+            if (ref?._tooltip) {
+                // Очищаем таймеры появления при скрытии страницы
+                clearTimeout(ref._tooltip._showTimeout);
+                if (ref._tooltip.isVisible) {
+                    ref._tooltip.hide({ immediately: true });
+                }
             }
         }
     }
@@ -53,8 +58,6 @@ export const createTooltip = ($el, content, options) => {
         }
     }
 
-    let showTimeout;
-    let hideTimeout;
     let rafId;
     const listeners = [];
 
@@ -65,6 +68,8 @@ export const createTooltip = ($el, content, options) => {
         $container: undefined,
         $arrow: undefined,
         $interactive: undefined,
+        _showTimeout: undefined,
+        _hideTimeout: undefined,
         autoUpdateCleanup: () => {},
 
         setContent(updatedContent) {
@@ -162,8 +167,8 @@ export const createTooltip = ($el, content, options) => {
                 return;
             }
 
-            clearTimeout(showTimeout);
+            clearTimeout($el._tooltip._showTimeout);
-            clearTimeout(hideTimeout);
+            clearTimeout($el._tooltip._hideTimeout);
             cancelAnimationFrame(rafId);
 
             $el._tooltip.$tooltip?.remove();
@@ -187,7 +192,7 @@ export const createTooltip = ($el, content, options) => {
     }
 
     $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');
@@ -294,10 +299,18 @@ export const createTooltip = ($el, content, options) => {
 
         const { autoUpdate } = await import('@floating-ui/dom');
 
-        showTimeout = setTimeout(
+        $el._tooltip._showTimeout = setTimeout(
             async () => {
-                // Проверяем $el._tooltip на сущестование
+                const isMouseEnterTrigger = options.trigger.includes('mouseenter');
-                if (!$el._tooltip || $el._tooltip.isVisible) {
+                const isHovering = $el.matches(':hover');
+
+                // Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
+                if (
+                    !$el._tooltip ||
+                    $el._tooltip.isVisible ||
+                    (isMouseEnterTrigger && !isHovering) ||
+                    document.hidden
+                ) {
                     return;
                 }
 
@@ -334,8 +347,8 @@ export const createTooltip = ($el, content, options) => {
     };
 
     $el._tooltip.hide = ({ immediately } = {}) => {
-        clearTimeout(showTimeout);
+        clearTimeout($el._tooltip._showTimeout);
-        hideTimeout = setTimeout(
+        $el._tooltip._hideTimeout = setTimeout(
             async () => {
                 // Проверяем $el._tooltip на сущестование
                 if (!$el._tooltip || !$el._tooltip.isVisible) {
@@ -395,13 +408,16 @@ export const createTooltip = ($el, content, options) => {
     };
 
     $el._tooltip.clickListener = () => {
+        if (document.hidden) {
+            return;
+        }
         if (!$el._tooltip.isVisible) {
             $el._tooltip.show();
         }
     };
 
     $el._tooltip.mouseEnterListener = (event) => {
-        if (event.pointerType !== 'mouse') {
+        if (event.pointerType !== 'mouse' || document.hidden) {
             return;
         }
         $el._tooltip.show();
@@ -431,6 +447,9 @@ export const createTooltip = ($el, content, options) => {
     };
 
     $el._tooltip.focusListener = () => {
+        if (document.hidden) {
+            return;
+        }
         $el._tooltip.show();
     };