added tooltips, still need work
This commit is contained in:
parent
47676edb13
commit
b6e2fd8c9e
2 changed files with 18 additions and 15 deletions
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue