Merge pull request #1212 from danielaskdd/main

Fix: tooltip flickering problem
This commit is contained in:
Daniel.y
2025-03-28 12:10:10 +08:00
committed by GitHub
3 changed files with 40 additions and 6 deletions

File diff suppressed because one or more lines are too long

View File

@@ -8,7 +8,7 @@
<link rel="icon" type="image/svg+xml" href="logo.png" /> <link rel="icon" type="image/svg+xml" href="logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightrag</title> <title>Lightrag</title>
<script type="module" crossorigin src="/webui/assets/index-D6o11nRy.js"></script> <script type="module" crossorigin src="/webui/assets/index-B4QL89Xd.js"></script>
<link rel="stylesheet" crossorigin href="/webui/assets/index-Bwboeqcm.css"> <link rel="stylesheet" crossorigin href="/webui/assets/index-Bwboeqcm.css">
</head> </head>
<body> <body>

View File

@@ -64,6 +64,14 @@ const pulseStyle = `
color: white; color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
pointer-events: none; /* Prevent tooltip from interfering with mouse events */ 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 { .dark .tooltip {
@@ -216,8 +224,8 @@ export default function DocumentManager() {
const tooltip = container.querySelector<HTMLElement>('.tooltip'); const tooltip = container.querySelector<HTMLElement>('.tooltip');
if (!tooltip) return; if (!tooltip) return;
// Only position visible tooltips // Skip tooltips that aren't visible
if (getComputedStyle(tooltip).visibility === 'hidden') return; if (!tooltip.classList.contains('visible')) return;
// Get container position // Get container position
const rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();
@@ -236,14 +244,32 @@ export default function DocumentManager() {
const container = target.closest('.tooltip-container'); const container = target.closest('.tooltip-container');
if (!container) return; if (!container) return;
// Small delay to ensure tooltip is visible before positioning // Find tooltip and make it visible
setTimeout(positionTooltips, 10); 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('mouseover', handleMouseOver);
document.addEventListener('mouseout', handleMouseOut);
return () => { return () => {
document.removeEventListener('mouseover', handleMouseOver); document.removeEventListener('mouseover', handleMouseOver);
document.removeEventListener('mouseout', handleMouseOut);
}; };
}, [docs]); }, [docs]);