Merge pull request #1212 from danielaskdd/main
Fix: tooltip flickering problem
This commit is contained in:
File diff suppressed because one or more lines are too long
2
lightrag/api/webui/index.html
generated
2
lightrag/api/webui/index.html
generated
@@ -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>
|
||||||
|
@@ -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]);
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user