1

utils/useMouseTooltip.js

@@ -9,6 +9,7 @@ let isInitialized = false
 let moveHandler = null
 let overHandler = null
 let outHandler = null
+let pointerDownHandler = null
 
 let rafId = null
 
@@ -131,11 +132,9 @@ export function useMouseTooltip() {
                 return
             }
 
-            const text =
+            tooltipEl.textContent =
                 target.dataset.tooltip || ''
 
-            tooltipEl.textContent = text
-
             updatePosition(
                 lastMouseX,
                 lastMouseY
@@ -148,6 +147,28 @@ export function useMouseTooltip() {
         })
     }
 
+    function forceHideTooltip() {
+        disconnectObserver()
+
+        if (showTimer) {
+            clearTimeout(showTimer)
+            showTimer = null
+        }
+
+        if (hideTimer) {
+            clearTimeout(hideTimer)
+            hideTimer = null
+        }
+
+        currentTarget = null
+
+        if (!tooltipEl) return
+
+        tooltipEl.style.opacity = '0'
+        tooltipEl.style.visibility = 'hidden'
+        tooltipEl.style.transform = 'scale(.85)'
+    }
+
     function showTooltip(e, target) {
         const text =
             target.dataset.tooltip || ''
@@ -185,6 +206,14 @@ export function useMouseTooltip() {
         tooltipEl.style.transform = 'scale(.85)'
 
         showTimer = setTimeout(() => {
+            if (
+                !currentTarget ||
+                !document.contains(currentTarget)
+            ) {
+                forceHideTooltip()
+                return
+            }
+
             if (currentTarget !== target) {
                 return
             }
@@ -219,6 +248,8 @@ export function useMouseTooltip() {
             tooltipEl.style.transform =
                 'scale(.85)'
 
+            currentTarget = null
+
             setTimeout(() => {
                 if (
                     !tooltipEl ||
@@ -230,8 +261,6 @@ export function useMouseTooltip() {
                 tooltipEl.style.visibility =
                     'hidden'
             }, 180)
-
-            currentTarget = null
         }, HIDE_DELAY)
     }
 
@@ -248,20 +277,34 @@ export function useMouseTooltip() {
                 return
             }
 
+            if (
+                !document.contains(currentTarget)
+            ) {
+                forceHideTooltip()
+                return
+            }
+
             lastMouseX = e.clientX
             lastMouseY = e.clientY
 
             if (rafId) return
 
-            rafId =
-                requestAnimationFrame(() => {
-                    rafId = null
+            rafId = requestAnimationFrame(() => {
+                rafId = null
 
-                    updatePosition(
-                        lastMouseX,
-                        lastMouseY
-                    )
-                })
+                if (
+                    !currentTarget ||
+                    !document.contains(currentTarget)
+                ) {
+                    forceHideTooltip()
+                    return
+                }
+
+                updatePosition(
+                    lastMouseX,
+                    lastMouseY
+                )
+            })
         }
 
         overHandler = (e) => {
@@ -295,7 +338,6 @@ export function useMouseTooltip() {
                 return
             }
 
-            // 子元素内部移动
             if (
                 e.relatedTarget &&
                 target.contains(
@@ -308,6 +350,10 @@ export function useMouseTooltip() {
             hideTooltip()
         }
 
+        pointerDownHandler = () => {
+            forceHideTooltip()
+        }
+
         document.addEventListener(
             'mouseover',
             overHandler,
@@ -325,28 +371,22 @@ export function useMouseTooltip() {
             moveHandler,
             true
         )
+
+        document.addEventListener(
+            'pointerdown',
+            pointerDownHandler,
+            true
+        )
     }
 
     function cleanup() {
-        disconnectObserver()
+        forceHideTooltip()
 
         if (rafId) {
             cancelAnimationFrame(rafId)
             rafId = null
         }
 
-        if (showTimer) {
-            clearTimeout(showTimer)
-            showTimer = null
-        }
-
-        if (hideTimer) {
-            clearTimeout(hideTimer)
-            hideTimer = null
-        }
-
-        currentTarget = null
-
         if (moveHandler) {
             document.removeEventListener(
                 'mousemove',
@@ -371,9 +411,20 @@ export function useMouseTooltip() {
             )
         }
 
+        if (pointerDownHandler) {
+            document.removeEventListener(
+                'pointerdown',
+                pointerDownHandler,
+                true
+            )
+        }
+
         moveHandler = null
         overHandler = null
         outHandler = null
+        pointerDownHandler = null
+
+        currentTarget = null
 
         isInitialized = false
     }