Optime tooltips display
This commit is contained in:
yangdx
@@ -47,18 +47,41 @@ const getDisplayFileName = (doc: DocStatusResponse, maxLength: number = 20): str
|
||||
};
|
||||
|
||||
const pulseStyle = `
|
||||
/* Fixed tooltip styles for small tables */
|
||||
.tooltip-fixed {
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* Parent container for tooltips */
|
||||
/* Tooltip styles */
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed; /* Use fixed positioning to escape overflow constraints */
|
||||
z-index: 9999; /* Ensure tooltip appears above all other elements */
|
||||
max-width: 600px;
|
||||
white-space: normal;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: none; /* Prevent tooltip from interfering with mouse events */
|
||||
}
|
||||
|
||||
.dark .tooltip {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Position tooltip helper class */
|
||||
.tooltip-helper {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
background-color: rgb(255 0 0 / 0.1);
|
||||
@@ -180,64 +203,47 @@ export default function DocumentManager() {
|
||||
// Reference to the card content element
|
||||
const cardContentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Add tooltip position adjustment based on mouse position
|
||||
// Add tooltip position adjustment for fixed positioning
|
||||
useEffect(() => {
|
||||
if (!docs) return;
|
||||
|
||||
// Function to handle mouse movement - throttled to reduce layout calculations
|
||||
let lastExecution = 0;
|
||||
const throttleInterval = 50; // ms
|
||||
|
||||
const handleMouseMove = () => {
|
||||
const now = Date.now();
|
||||
if (now - lastExecution < throttleInterval) return;
|
||||
lastExecution = now;
|
||||
|
||||
const cardContent = cardContentRef.current;
|
||||
if (!cardContent) return;
|
||||
|
||||
// Get all visible tooltips
|
||||
const visibleTooltips = document.querySelectorAll<HTMLElement>('.group:hover > div[class*="invisible group-hover:visible absolute"]');
|
||||
if (visibleTooltips.length === 0) return;
|
||||
|
||||
visibleTooltips.forEach(tooltip => {
|
||||
// Get the parent element that triggered the tooltip
|
||||
const triggerElement = tooltip.parentElement;
|
||||
if (!triggerElement) return;
|
||||
|
||||
const triggerRect = triggerElement.getBoundingClientRect();
|
||||
|
||||
// Use fixed positioning for all tooltips
|
||||
tooltip.classList.add('tooltip-fixed');
|
||||
|
||||
// Calculate position based on trigger element
|
||||
const tooltipHeight = tooltip.offsetHeight;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Check if tooltip would go off the bottom of the viewport
|
||||
const wouldOverflowBottom = triggerRect.bottom + tooltipHeight + 5 > viewportHeight;
|
||||
|
||||
if (wouldOverflowBottom) {
|
||||
// Position above the trigger
|
||||
tooltip.style.top = `${triggerRect.top - tooltipHeight - 5}px`;
|
||||
tooltip.style.bottom = 'auto';
|
||||
} else {
|
||||
// Position below the trigger
|
||||
tooltip.style.top = `${triggerRect.bottom + 5}px`;
|
||||
tooltip.style.bottom = 'auto';
|
||||
}
|
||||
|
||||
// Horizontal positioning
|
||||
tooltip.style.left = `${triggerRect.left}px`;
|
||||
tooltip.style.maxWidth = '600px';
|
||||
// Function to position tooltips
|
||||
const positionTooltips = () => {
|
||||
// Get all tooltip containers
|
||||
const containers = document.querySelectorAll<HTMLElement>('.tooltip-container');
|
||||
|
||||
containers.forEach(container => {
|
||||
const tooltip = container.querySelector<HTMLElement>('.tooltip');
|
||||
if (!tooltip) return;
|
||||
|
||||
// Only position visible tooltips
|
||||
if (getComputedStyle(tooltip).visibility === 'hidden') return;
|
||||
|
||||
// Get container position
|
||||
const rect = container.getBoundingClientRect();
|
||||
|
||||
// Position tooltip above the container
|
||||
tooltip.style.left = `${rect.left}px`;
|
||||
tooltip.style.top = `${rect.top - 5}px`;
|
||||
tooltip.style.transform = 'translateY(-100%)';
|
||||
});
|
||||
};
|
||||
|
||||
// Add mouse move listener to the document
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
|
||||
// Set up event listeners
|
||||
const handleMouseOver = (e: MouseEvent) => {
|
||||
// Check if target or its parent is a tooltip container
|
||||
const target = e.target as HTMLElement;
|
||||
const container = target.closest('.tooltip-container');
|
||||
if (!container) return;
|
||||
|
||||
// Small delay to ensure tooltip is visible before positioning
|
||||
setTimeout(positionTooltips, 10);
|
||||
};
|
||||
|
||||
document.addEventListener('mouseover', handleMouseOver);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseover', handleMouseOver);
|
||||
};
|
||||
}, [docs]);
|
||||
|
||||
@@ -395,7 +401,7 @@ export default function DocumentManager() {
|
||||
)}
|
||||
{docs && (
|
||||
<div className="absolute inset-0 flex flex-col p-0">
|
||||
<div className="w-full h-full flex flex-col border border-gray-200 dark:border-gray-700 overflow-auto">
|
||||
<div className="w-full h-full flex flex-col border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<Table className="w-full">
|
||||
<TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
|
||||
<TableRow className="border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/75 shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]">
|
||||
@@ -458,7 +464,7 @@ export default function DocumentManager() {
|
||||
<div className="truncate">
|
||||
{getDisplayFileName(doc, 30)}
|
||||
</div>
|
||||
<div className="invisible group-hover:visible absolute z-[9999] mt-1 max-w-[600px] whitespace-normal break-all rounded-md bg-black/95 px-3 py-2 text-sm text-white shadow-lg dark:bg-white/95 dark:text-black">
|
||||
<div className="invisible group-hover:visible tooltip">
|
||||
{doc.file_path}
|
||||
</div>
|
||||
</div>
|
||||
@@ -469,7 +475,7 @@ export default function DocumentManager() {
|
||||
<div className="truncate">
|
||||
{doc.id}
|
||||
</div>
|
||||
<div className="invisible group-hover:visible absolute z-[9999] mt-1 max-w-[600px] whitespace-normal break-all rounded-md bg-black/95 px-3 py-2 text-sm text-white shadow-lg dark:bg-white/95 dark:text-black">
|
||||
<div className="invisible group-hover:visible tooltip">
|
||||
{doc.file_path}
|
||||
</div>
|
||||
</div>
|
||||
@@ -480,7 +486,7 @@ export default function DocumentManager() {
|
||||
<div className="truncate">
|
||||
{doc.content_summary}
|
||||
</div>
|
||||
<div className="invisible group-hover:visible absolute z-[9999] mt-1 max-w-[600px] whitespace-normal break-all rounded-md bg-black/95 px-3 py-2 text-sm text-white shadow-lg dark:bg-white/95 dark:text-black">
|
||||
<div className="invisible group-hover:visible tooltip">
|
||||
{doc.content_summary}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user