Hover tooltips (#427)

* hover tool tips added

Signed-off-by: Keval Mahajan <[email protected]>

* minor linting fix

Signed-off-by: Keval Mahajan <[email protected]>

* tool tip disappears when test is clicked

Signed-off-by: Keval Mahajan <[email protected]>

* linting

Signed-off-by: Keval Mahajan <[email protected]>

---------

Signed-off-by: Keval Mahajan <[email protected]>

Author: kevalmahajan

mcpgateway/static/admin.css

@@ -8,7 +8,6 @@
   border: 1px solid #ebccd1;
 }
 
-
 /* CSS for the spinner */
 .spinner {
   border: 4px solid #f3f3f3;
@@ -29,6 +28,26 @@
   /* Ensures it behaves like a block-level element */
 }
 
+/* CSS for the tooltip */
+.tooltip {
+  position: fixed;
+  z-index: 9999;
+  background-color: #1f2937; /* Tailwind's gray-800 */
+  color: white;
+  font-size: 0.875rem; /* text-sm */
+  border-radius: 0.5rem; /* Increased rounded corners */
+  padding: 0.75rem 1rem; /* More padding */
+  pointer-events: none;
+  transition: transform 0.2s ease, opacity 0.3s ease; /* Added smooth transition */
+  opacity: 0;
+  transform: scale(0.8); /* Tooltip starts slightly smaller */
+}
+
+.tooltip.show {
+  opacity: 1;
+  transform: scale(1); /* Scales up smoothly */
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

mcpgateway/static/admin.js

@@ -4086,6 +4086,104 @@ if (window.performance && window.performance.mark) {
     console.log("✓ Performance markers available");
 }
 
+// ===================================================================
+// Tool Tips for components with Alpine.js
+// ===================================================================
+
+/* global Alpine */
+function setupTooltipsWithAlpine() {
+    document.addEventListener("alpine:init", () => {
+        console.log("Initializing Alpine tooltip directive...");
+
+        Alpine.directive("tooltip", (el, { expression }, { evaluate }) => {
+            let tooltipEl = null;
+
+            const moveTooltip = (e) => {
+                if (!tooltipEl) {
+                    return;
+                }
+
+                const paddingX = 12;
+                const paddingY = 20;
+                const tipRect = tooltipEl.getBoundingClientRect();
+
+                let left = e.clientX + paddingX;
+                let top = e.clientY + paddingY;
+
+                if (left + tipRect.width > window.innerWidth - 8) {
+                    left = e.clientX - tipRect.width - paddingX;
+                }
+                if (top + tipRect.height > window.innerHeight - 8) {
+                    top = e.clientY - tipRect.height - paddingY;
+                }
+
+                tooltipEl.style.left = `${left}px`;
+                tooltipEl.style.top = `${top}px`;
+            };
+
+            const showTooltip = (event) => {
+                const text = evaluate(expression);
+                if (!text) {
+                    return;
+                }
+
+                hideTooltip(); // Clean up any existing tooltip
+
+                tooltipEl = document.createElement("div");
+                tooltipEl.textContent = text;
+                tooltipEl.setAttribute("role", "tooltip");
+                tooltipEl.className =
+                    "fixed z-50 max-w-xs px-3 py-2 text-sm text-white bg-black/80 rounded-lg shadow-lg pointer-events-none opacity-0 transition-opacity duration-200";
+
+                document.body.appendChild(tooltipEl);
+
+                if (event?.clientX && event?.clientY) {
+                    moveTooltip(event);
+                    el.addEventListener("mousemove", moveTooltip);
+                } else {
+                    const rect = el.getBoundingClientRect();
+                    const scrollY = window.scrollY || window.pageYOffset;
+                    const scrollX = window.scrollX || window.pageXOffset;
+                    tooltipEl.style.left = `${rect.left + scrollX}px`;
+                    tooltipEl.style.top = `${rect.bottom + scrollY + 10}px`;
+                }
+
+                requestAnimationFrame(() => {
+                    tooltipEl.style.opacity = "1";
+                });
+                window.addEventListener("scroll", hideTooltip, {
+                    passive: true,
+                });
+                window.addEventListener("resize", hideTooltip, {
+                    passive: true,
+                });
+            };
+
+            const hideTooltip = () => {
+                if (!tooltipEl) {
+                    return;
+                }
+
+                tooltipEl.style.opacity = "0";
+                el.removeEventListener("mousemove", moveTooltip);
+                window.removeEventListener("scroll", hideTooltip);
+                window.removeEventListener("resize", hideTooltip);
+                el.addEventListener("click", hideTooltip);
+                const toRemove = tooltipEl;
+                tooltipEl = null;
+                setTimeout(() => toRemove.remove(), 200);
+            };
+            el.addEventListener("mouseenter", showTooltip);
+            el.addEventListener("mouseleave", hideTooltip);
+            el.addEventListener("focus", showTooltip);
+            el.addEventListener("blur", hideTooltip);
+            el.addEventListener("click", hideTooltip);
+        });
+    });
+}
+
+setupTooltipsWithAlpine();
+
 // ===================================================================
 // SINGLE CONSOLIDATED INITIALIZATION SYSTEM
 // ===================================================================
@@ -4094,6 +4192,8 @@ document.addEventListener("DOMContentLoaded", () => {
     console.log("🔐 DOM loaded - initializing secure admin interface...");
 
     try {
+        // initializeTooltips();
+
         // 1. Initialize CodeMirror editors first
         initializeCodeMirrorEditors();