First Working version. I can add table

src/assets/main.js

@@ -0,0 +1,51 @@
+function bindTooltipsWithDelegation(elementId) {
+    console.debug("bindTooltips on element " + elementId);
+
+    const element = document.getElementById(elementId);
+    const tooltipContainer = document.getElementById(`tt_${elementId}`);
+
+    if (!element || !tooltipContainer) {
+        console.error("Invalid element or tooltip container");
+        return;
+    }
+
+    // Add a single mouseenter and mouseleave listener to the parent element
+    element.addEventListener("mouseenter", (event) => {
+        const cell = event.target.closest("div[data-tooltip]");
+        if (!cell) return;
+
+        const content = cell.querySelector(".truncate") || cell;
+        const isOverflowing = content.scrollWidth > content.clientWidth;
+        const forceShow = cell.classList.contains("mmt-tooltip");
+
+        if (isOverflowing || forceShow) {
+            const tooltipText = cell.getAttribute("data-tooltip");
+            if (tooltipText) {
+                const rect = cell.getBoundingClientRect();
+                const tooltipRect = tooltipContainer.getBoundingClientRect();
+
+                let top = rect.top - 30; // Above the cell
+                let left = rect.left;
+
+                // Adjust tooltip position to prevent it from going off-screen
+                if (top < 0) top = rect.bottom + 5; // Move below if no space above
+                if (left + tooltipRect.width > window.innerWidth) {
+                    left = window.innerWidth - tooltipRect.width - 5; // Prevent overflow right
+                }
+
+                // Apply styles for tooltip positioning
+                tooltipContainer.textContent = tooltipText;
+                tooltipContainer.setAttribute("data-visible", "true");
+                tooltipContainer.style.top = `${top}px`;
+                tooltipContainer.style.left = `${left}px`;
+            }
+        }
+    }, true); // Use capture phase for better delegation if needed
+
+    element.addEventListener("mouseleave", (event) => {
+        const cell = event.target.closest("div[data-tooltip]");
+        if (cell) {
+            tooltipContainer.setAttribute("data-visible", "false");
+        }
+    }, true); // Use capture phase for better delegation if needed
+}