Fix: tooltip flickering problem
This commit is contained in:
@@ -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