From 8cd7d418dc55804005c7c69635d7ae7fa91d96b1 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Fri, 28 Mar 2025 12:03:30 +0800
Subject: [PATCH] Fix: tooltip flickering problem

---
 .../src/features/DocumentManager.tsx          | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/lightrag_webui/src/features/DocumentManager.tsx b/lightrag_webui/src/features/DocumentManager.tsx
index b5b1be26..b6086bca 100644
--- a/lightrag_webui/src/features/DocumentManager.tsx
+++ b/lightrag_webui/src/features/DocumentManager.tsx
@@ -64,6 +64,14 @@ const pulseStyle = `
   color: white;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   pointer-events: none; /* Prevent tooltip from interfering with mouse events */
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+
+.tooltip.visible {
+  opacity: 1;
+  visibility: visible;
 }
 
 .dark .tooltip {
@@ -216,8 +224,8 @@ export default function DocumentManager() {
         const tooltip = container.querySelector<HTMLElement>('.tooltip');
         if (!tooltip) return;
 
-        // Only position visible tooltips
-        if (getComputedStyle(tooltip).visibility === 'hidden') return;
+        // Skip tooltips that aren't visible
+        if (!tooltip.classList.contains('visible')) return;
 
         // Get container position
         const rect = container.getBoundingClientRect();
@@ -236,14 +244,32 @@ export default function DocumentManager() {
       const container = target.closest('.tooltip-container');
       if (!container) return;
 
-      // Small delay to ensure tooltip is visible before positioning
-      setTimeout(positionTooltips, 10);
+      // Find tooltip and make it visible
+      const tooltip = container.querySelector<HTMLElement>('.tooltip');
+      if (tooltip) {
+        tooltip.classList.add('visible');
+        // Position immediately without delay
+        positionTooltips();
+      }
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const container = target.closest('.tooltip-container');
+      if (!container) return;
+
+      const tooltip = container.querySelector<HTMLElement>('.tooltip');
+      if (tooltip) {
+        tooltip.classList.remove('visible');
+      }
     };
 
     document.addEventListener('mouseover', handleMouseOver);
+    document.addEventListener('mouseout', handleMouseOut);
 
     return () => {
       document.removeEventListener('mouseover', handleMouseOver);
+      document.removeEventListener('mouseout', handleMouseOut);
     };
   }, [docs]);