added tooltips, still need work

This commit is contained in:
Boki 2025-06-18 08:35:52 -04:00
parent 47676edb13
commit b6e2fd8c9e
2 changed files with 18 additions and 15 deletions

View file

@ -19,21 +19,25 @@ function CellWithTooltip({ children, className }: { children: React.ReactNode; c
const [tooltipContent, setTooltipContent] = useState('');
const cellRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const element = cellRef.current;
if (element) {
// Check if content is overflowing
const isOverflowing = element.scrollWidth > element.clientWidth;
if (isOverflowing) {
setTooltipContent(element.textContent || '');
}
}
}, [children]);
const handleMouseEnter = () => {
const element = cellRef.current;
if (element && element.scrollWidth > element.clientWidth) {
setShowTooltip(true);
if (element) {
// Get the text content from the element or its children
const textContent = element.textContent || '';
setTooltipContent(textContent);
console.log('Element dimensions:', {
scrollWidth: element.scrollWidth,
clientWidth: element.clientWidth,
textContent,
isOverflowing: element.scrollWidth > element.clientWidth
});
// Check if content is overflowing by comparing scroll width to client width
const isOverflowing = element.scrollWidth > element.clientWidth;
if (isOverflowing || textContent.length > 10) { // Temporarily show tooltip for testing
setShowTooltip(true);
}
}
};
@ -52,7 +56,7 @@ function CellWithTooltip({ children, className }: { children: React.ReactNode; c
{children}
</div>
{showTooltip && tooltipContent && (
<div className="absolute z-50 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg whitespace-nowrap -top-8 left-0 max-w-xs">
<div className="absolute z-50 px-2 py-1 bg-surface-secondary border border-border text-text-primary text-xs rounded shadow-lg whitespace-nowrap -top-8 left-0 pointer-events-none">
{tooltipContent}
</div>
)}

View file

@ -154,7 +154,6 @@ export function ExchangesTable() {
setEditingCell({ id: row.original.id, field: 'name' });
setEditValue(getValue() as string);
}}
title={getValue() as string}
>
{getValue() as string}
</div>