Custom tooltip system, fix import reliability, fix active mode button hover

jeremymanning · claude · jeremymanning · commit dbf2b475f118 · 2026-02-19T21:38:04.000-05:00
- Replace native title attrs with JS-powered [data-tooltip] tooltip system
  that escapes overflow:hidden containers by appending to &lt;body&gt;
- Style matches map tooltips: dark surface, subtle border/shadow, 200ms delay
- Tooltips work on all buttons: header icons, reset/export/import, mode pills,
  quiz toggle — including on the welcome screen before domain selection
- Hidden on mobile (480px breakpoint) to avoid touch overlap
- Fix import: attach &lt;input type="file"&gt; to DOM before triggering click
  (some browsers suppress change event on detached inputs); add cancel handler
  and visible success banner after import
- Fix active mode button hover: .mode-btn.active:hover keeps white text
  on green background instead of turning text green (invisible)
- Remove old CSS ::after tooltip from disabled mode buttons (replaced by
  global JS tooltip system)

Co-Authored-By: Claude (claude-opus-4-6) &lt;noreply@anthropic.com&gt;
diff --git a/index.html b/index.html
@@ -144,6 +144,27 @@
             cursor: not-allowed;
         }
 
+        /* ── Custom tooltip (JS-positioned, appended to body) ── */
+        .ui-tooltip {
+            position: fixed;
+            pointer-events: none;
+            z-index: 99999;
+            background: var(--color-surface);
+            color: var(--color-text);
+            padding: 6px 10px;
+            border-radius: 6px;
+            font-size: 0.72rem;
+            font-family: var(--font-body);
+            font-weight: 400;
+            line-height: 1.4;
+            white-space: nowrap;
+            border: 1px solid var(--color-border);
+            box-shadow: 0 4px 16px rgba(0,0,0,0.35);
+            opacity: 0;
+            transition: opacity 0.15s ease;
+        }
+        .ui-tooltip.visible { opacity: 1; }
+
         #app-main {
             display: flex;
             position: relative;
@@ -634,6 +655,8 @@
             .btn-icon { min-width: 34px; min-height: 34px; font-size: 0.85rem; }
             /* Make dropdown arrow easier to see on mobile */
             .custom-select-arrow { font-size: 0.9rem; }
+            /* Hide custom tooltips on touch devices */
+            .ui-tooltip { display: none !important; }
             #quiz-panel {
                 position: absolute;
                 top: auto; bottom: 0; left: 0; right: 0;
@@ -688,16 +711,16 @@
                 <div class="domain-selector" hidden aria-label="Select knowledge domain"></div>
             </div>
             <div class="header-right">
-                <button id="trophy-btn" class="btn-icon" aria-label="My areas of expertise" title="My areas of expertise" disabled>
+                <button id="trophy-btn" class="btn-icon" aria-label="My areas of expertise" data-tooltip="My areas of expertise" disabled>
                     <i class="fa-solid fa-trophy"></i>
                 </button>
-                <button id="suggest-btn" class="btn-icon" aria-label="Suggest articles to learn" title="Suggest articles to maximally boost my knowledge" disabled>
+                <button id="suggest-btn" class="btn-icon" aria-label="Suggest articles to learn" data-tooltip="Suggested learning" disabled>
                     <i class="fa-solid fa-graduation-cap"></i>
                 </button>
-                <button id="share-btn" class="btn-icon" aria-label="Share your knowledge map" title="Share your knowledge map">
+                <button id="share-btn" class="btn-icon" aria-label="Share your knowledge map" data-tooltip="Share">
                     <i class="fa-solid fa-share-nodes"></i>
                 </button>
-                <button id="about-btn" class="btn-icon" aria-label="About this project" title="About this project">
+                <button id="about-btn" class="btn-icon" aria-label="About this project" data-tooltip="About">
                     <i class="fa-solid fa-circle-info"></i>
                 </button>
             </div>
@@ -739,7 +762,7 @@ <h2>Map out (an approximation of) everything you know!</h2>
             <section id="map-container" aria-label="Interactive Heatmap" tabindex="0"></section>
 
             <!-- Quiz Panel Toggle -->
-            <button id="quiz-toggle" class="quiz-toggle-btn" hidden aria-label="Open quiz panel" title="Press to show/hide the questions">
+            <button id="quiz-toggle" class="quiz-toggle-btn" hidden aria-label="Open quiz panel" data-tooltip="Show/hide questions">
                 <i class="fa-solid fa-chevron-left"></i>
             </button>
 
@@ -864,6 +887,70 @@ <h1>JavaScript Required</h1>
     <!-- Feature Detection (T066) - runs before ES modules to detect unsupported browsers -->
     <script src="feature-detection.js"></script>
 
+    <!-- Global custom tooltip system for [data-tooltip] elements -->
+    <script>
+    (function() {
+      var tip = document.createElement('div');
+      tip.className = 'ui-tooltip';
+      document.body.appendChild(tip);
+      var showTimer = null;
+      var DELAY = 200;
+
+      function show(el) {
+        var text = el.getAttribute('data-tooltip');
+        if (!text) return;
+        tip.textContent = text;
+        // Measure and position
+        tip.style.opacity = '0';
+        tip.classList.add('visible');
+        var r = el.getBoundingClientRect();
+        var tw = tip.offsetWidth;
+        var th = tip.offsetHeight;
+        // Default: centered above the element
+        var left = r.left + r.width / 2 - tw / 2;
+        var top = r.top - th - 8;
+        // If clipped at top, show below
+        if (top < 4) top = r.bottom + 8;
+        // Keep within horizontal viewport
+        if (left < 4) left = 4;
+        if (left + tw > window.innerWidth - 4) left = window.innerWidth - tw - 4;
+        tip.style.left = left + 'px';
+        tip.style.top = top + 'px';
+        tip.style.opacity = '';
+      }
+
+      function hide() {
+        clearTimeout(showTimer);
+        showTimer = null;
+        tip.classList.remove('visible');
+      }
+
+      function tooltipTarget(e) {
+        var t = e.target;
+        if (!t || !t.closest) return null;
+        return t.closest('[data-tooltip]');
+      }
+
+      document.addEventListener('pointerenter', function(e) {
+        var el = tooltipTarget(e);
+        if (!el) return;
+        clearTimeout(showTimer);
+        showTimer = setTimeout(function() { show(el); }, DELAY);
+      }, true);
+
+      document.addEventListener('pointerleave', function(e) {
+        var el = tooltipTarget(e);
+        if (!el) return;
+        hide();
+      }, true);
+
+      // Also hide on click (tooltip served its purpose)
+      document.addEventListener('pointerdown', hide, true);
+      // Hide on scroll
+      document.addEventListener('scroll', hide, true);
+    })();
+    </script>
+
     <!-- Vite Entry Point -->
     <script type="module" src="/src/app.js"></script>
 </body>
diff --git a/src/app.js b/src/app.js
@@ -500,6 +500,7 @@ function handleExport() {
 }
 
 function handleImport(data) {
+  console.log('[import] handleImport called with', data ? 'data' : 'null');
   if (!data) return;
 
   let responses = [];
@@ -561,7 +562,10 @@ function handleImport(data) {
     renderer.setAnsweredQuestions(responsesToAnsweredDots(merged, questionIndex));
   }
 
-  announce(`Imported ${newResponses.length} new responses (${valid.length} total in file, ${existing.length} already existed).`);
+  const msg = `Imported ${newResponses.length} new responses (${valid.length} total in file, ${existing.length} already existed).`;
+  announce(msg);
+  _showBanner(msg, 'success');
+  console.log('[import]', msg);
 }
 
 function handleViewportChange(viewport) {
diff --git a/src/ui/controls.js b/src/ui/controls.js
@@ -181,7 +181,7 @@ export function init(headerElement) {
   resetButton = document.createElement('button');
   resetButton.className = 'control-btn';
   resetButton.ariaLabel = 'Reset all progress';
-  resetButton.title = 'Reset all progress';
+  resetButton.dataset.tooltip = 'Reset all progress';
   resetButton.innerHTML = '<i class="fa-solid fa-rotate-right"></i>';
   resetButton.hidden = true;
   resetButton.addEventListener('click', () => {
@@ -192,7 +192,7 @@ export function init(headerElement) {
   exportButton = document.createElement('button');
   exportButton.className = 'control-btn';
   exportButton.ariaLabel = 'Export progress as JSON';
-  exportButton.title = 'Export progress as JSON';
+  exportButton.dataset.tooltip = 'Export progress';
   exportButton.innerHTML = '<i class="fa-solid fa-download"></i>';
   exportButton.hidden = true;
   exportButton.addEventListener('click', () => {
@@ -203,19 +203,25 @@ export function init(headerElement) {
   importButton = document.createElement('button');
   importButton.className = 'control-btn';
   importButton.ariaLabel = 'Import saved progress';
-  importButton.title = 'Import saved progress';
+  importButton.dataset.tooltip = 'Import progress';
   importButton.innerHTML = '<i class="fa-solid fa-upload"></i>';
   importButton.hidden = true;
-  // Keep a module-level reference to avoid GC before FileReader fires
-  let _importInput = null;
 
   importButton.addEventListener('click', () => {
-    _importInput = document.createElement('input');
-    _importInput.type = 'file';
-    _importInput.accept = '.json,application/json';
-    _importInput.addEventListener('change', (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
+    // Create a file input, attach to DOM (required by some browsers for
+    // the change event to fire), then remove after reading.
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json,application/json';
+    input.style.cssText = 'position:fixed;left:-9999px;opacity:0;pointer-events:none;';
+    document.body.appendChild(input);
+
+    input.addEventListener('change', () => {
+      const file = input.files[0];
+      if (!file) {
+        document.body.removeChild(input);
+        return;
+      }
       const reader = new FileReader();
       reader.onload = () => {
         try {
@@ -225,16 +231,22 @@ export function init(headerElement) {
           console.error('[controls] Failed to parse import file:', err);
           alert('Invalid file format. Please select a Knowledge Mapper export JSON file.');
         }
-        _importInput = null; // Release reference after successful read
+        document.body.removeChild(input);
       };
       reader.onerror = () => {
         console.error('[controls] FileReader error:', reader.error);
         alert('Could not read file. Please try again.');
-        _importInput = null;
+        document.body.removeChild(input);
       };
       reader.readAsText(file);
     });
-    _importInput.click();
+
+    // Clean up if user cancels the file dialog
+    input.addEventListener('cancel', () => {
+      document.body.removeChild(input);
+    });
+
+    input.click();
   });
   container.appendChild(importButton);
 
diff --git a/src/ui/modes.js b/src/ui/modes.js
@@ -53,7 +53,8 @@ export function init(container) {
         color: var(--color-primary);
         box-shadow: 0 0 8px var(--color-glow-primary);
       }
-      .mode-btn.active {
+      .mode-btn.active,
+      .mode-btn.active:hover {
         background: var(--color-primary);
         color: #ffffff;
         border-color: var(--color-primary);
@@ -75,32 +76,15 @@ export function init(container) {
         color: var(--color-secondary);
         box-shadow: 0 0 8px var(--color-glow-secondary);
       }
-      .mode-btn--insight.active {
+      .mode-btn--insight.active,
+      .mode-btn--insight.active:hover {
         border-style: solid;
         background: var(--color-secondary);
         color: #ffffff;
         border-color: var(--color-secondary);
         box-shadow: 0 0 12px var(--color-glow-secondary);
       }
-      .mode-btn:disabled:hover::after {
-        content: attr(data-tooltip);
-        position: absolute;
-        bottom: calc(100% + 8px);
-        left: 50%;
-        transform: translateX(-50%);
-        background: var(--color-surface);
-        color: var(--color-text);
-        padding: 6px 12px;
-        border-radius: 6px;
-        font-size: 0.75rem;
-        white-space: nowrap;
-        z-index: 100;
-        pointer-events: none;
-        border: 1px solid #00693e;
-        border-left: 3px solid #00693e;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        max-width: 200px;
-      }
+      /* Disabled mode button tooltips handled by global [data-tooltip] JS system */
     `;
     document.head.appendChild(style);
   }

Original file line number	Diff line number	Diff line change
`@@ -500,6 +500,7 @@ function handleExport() {`
`500`	`500`	`}`
`501`	`501`
`502`	`502`	`function handleImport(data) {`
	`503`	`+ console.log('[import] handleImport called with', data ? 'data' : 'null');`
`503`	`504`	`if (!data) return;`
`504`	`505`
`505`	`506`	`let responses = [];`
`@@ -561,7 +562,10 @@ function handleImport(data) {`
`561`	`562`	`renderer.setAnsweredQuestions(responsesToAnsweredDots(merged, questionIndex));`
`562`	`563`	`}`
`563`	`564`
`564`		- announce(`Imported ${newResponses.length} new responses (${valid.length} total in file, ${existing.length} already existed).`);
	`565`	+ const msg = `Imported ${newResponses.length} new responses (${valid.length} total in file, ${existing.length} already existed).`;
	`566`	`+ announce(msg);`
	`567`	`+ _showBanner(msg, 'success');`
	`568`	`+ console.log('[import]', msg);`
`565`	`569`	`}`
`566`	`570`
`567`	`571`	`function handleViewportChange(viewport) {`