From b6e2fd8c9ee3b754e7a784f9011b6f327bc9ccb1 Mon Sep 17 00:00:00 2001
From: Boki <boki@stare.gg>
Date: Wed, 18 Jun 2025 08:35:52 -0400
Subject: [PATCH] added tooltips, still need work

---
 .../src/components/ui/DataTable/DataTable.tsx | 32 +++++++++++--------
 .../exchanges/components/ExchangesTable.tsx   |  1 -
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/web-app/src/components/ui/DataTable/DataTable.tsx b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
index 1811074..6d350f3 100644
--- a/apps/web-app/src/components/ui/DataTable/DataTable.tsx
+++ b/apps/web-app/src/components/ui/DataTable/DataTable.tsx
@@ -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>
       )}
diff --git a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx b/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
index a825ea9..5a829fa 100644
--- a/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
+++ b/apps/web-app/src/features/exchanges/components/ExchangesTable.tsx
@@ -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>