Implement custom tooltips with delay and theme support

Author: TheDuffman85

popup.html

@@ -198,6 +198,7 @@
     </div>
   </div>
 
+  <div id="tooltip" class="tooltip"></div>
   <script src="popup.js"></script>
 </body>
 

popup.js

@@ -496,6 +496,8 @@ document.addEventListener('DOMContentLoaded', () => {
         loadStoredFile();
       }
     });
+
+    setupTooltips();
   }
 
   // ==================
@@ -1019,4 +1021,98 @@ document.addEventListener('DOMContentLoaded', () => {
       elements.sendBtn.disabled = false;
     }
   }
+  function setupTooltips() {
+    const tooltip = document.getElementById('tooltip');
+    let activeElement = null;
+    let tooltipTimeout = null;
+
+    document.addEventListener('mouseover', (e) => {
+      // Find closest element with a title attribute or data-tooltip
+      const target = e.target.closest('[title], [data-tooltip]');
+
+      // If we are already tracking this element, do nothing (prevents timer reset on mouse move inside element)
+      if (activeElement && target === activeElement) {
+        return;
+      }
+
+      // If we moved to a new element (or no element), clear any pending tooltip
+      if (activeElement) {
+        clearTimeout(tooltipTimeout);
+        hideTooltip();
+      }
+
+      if (!target) {
+        return;
+      }
+
+      // If it has a title, move it to data-tooltip to suppress native tooltip
+      if (target.hasAttribute('title')) {
+        const title = target.getAttribute('title');
+        target.setAttribute('data-tooltip', title);
+        target.removeAttribute('title');
+      }
+
+      const text = target.getAttribute('data-tooltip');
+      if (!text) return;
+
+      activeElement = target;
+
+      // Delay showing the tooltip
+      tooltipTimeout = setTimeout(() => {
+        // Double-check we are still active on this element
+        if (activeElement === target) {
+          showTooltip(target, text);
+        }
+      }, 1000); // 1000ms delay
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      if (activeElement && (e.target === activeElement || e.target.closest('[data-tooltip]') === activeElement)) {
+        // check if we moved to child of the active element
+        if (e.relatedTarget && activeElement.contains(e.relatedTarget)) {
+          return;
+        }
+
+        // otherwise, we left the element entirely
+        clearTimeout(tooltipTimeout);
+        hideTooltip();
+      }
+    });
+
+    function showTooltip(element, text) {
+      if (!element.isConnected) return; // Verify element is still in DOM
+
+      tooltip.textContent = text;
+      tooltip.classList.add('visible');
+
+      const rect = element.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const margin = 8;
+
+      // Default: Top center
+      let top = rect.top - tooltipRect.height - margin;
+      let left = rect.left + (rect.width - tooltipRect.width) / 2;
+
+      // prevent overflow top
+      if (top < 0) {
+        top = rect.bottom + margin;
+      }
+
+      // prevent overflow left/right
+      if (left < margin) {
+        left = margin;
+      } else if (left + tooltipRect.width > window.innerWidth - margin) {
+        left = window.innerWidth - tooltipRect.width - margin;
+      }
+
+      tooltip.style.top = `${top}px`;
+      tooltip.style.left = `${left}px`;
+    }
+
+    function hideTooltip() {
+      tooltip.classList.remove('visible');
+      activeElement = null;
+    }
+  }
+
 });

styles.css

@@ -799,9 +799,36 @@ body {
 .divider {
     height: 1px;
     background-color: var(--border-color);
-    margin: 10px 0;
+    margin: 16px 0;
 }
 
+/* ========================================
+   Tooltip
+   ======================================== */
+
+.tooltip {
+    position: fixed;
+    padding: 6px 10px;
+    background-color: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    box-shadow: var(--shadow);
+    z-index: 1000;
+    white-space: nowrap;
+}
+
+.tooltip.visible {
+    opacity: 1;
+}
+
+
+
 /* ========================================
    Filepicker-specific Styles
    ======================================== */