fix: custom tooltip (no wiggle required), add ⓘ indicator for described units

- Replace native title-based tooltip with custom positioned div
  Native title only renders on mousemove; custom div fires on mouseenter
  after 500ms delay as intended
- Tooltip styled dark with fade-in; Dan Mode gets yellow-on-black with magenta glow
- Units with descriptions show a small superscript ⓘ on the result label

src/lib/actions/tooltip.ts

@@ -1,15 +1,56 @@
 /**
- * Svelte action: show a native `title` tooltip after a 500ms hover delay.
+ * Svelte action: show a custom tooltip after a 500ms hover delay.
+ * Uses a positioned div instead of the native `title` attribute —
+ * native tooltips only appear on mousemove, not on mouseenter, which
+ * causes a "hover then wiggle" requirement that feels broken.
+ *
  * If text is empty, does nothing.
  */
+
+const TOOLTIP_CLASS = 'hu-tooltip';
+
+// Shared tooltip element — one per page, repositioned as needed.
+let tooltipEl: HTMLDivElement | null = null;
+
+function getTooltipEl(): HTMLDivElement {
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div');
+    tooltipEl.className = TOOLTIP_CLASS;
+    document.body.appendChild(tooltipEl);
+  }
+  return tooltipEl;
+}
+
 export function tooltip(node: HTMLElement, text: string) {
   let timer: ReturnType<typeof setTimeout> | null = null;
+  let currentText = text;
 
-  function enter() {
-    if (!text) return;
-    timer = setTimeout(() => {
-      node.title = text;
-    }, 500);
+  function show(e: MouseEvent) {
+    if (!currentText) return;
+    const el = getTooltipEl();
+    el.textContent = currentText;
+
+    // Position near cursor, clamped to viewport
+    const x = Math.min(e.clientX + 12, window.innerWidth - el.offsetWidth - 8);
+    const y = e.clientY + 20;
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+    el.classList.add('hu-tooltip--visible');
+  }
+
+  function enter(e: MouseEvent) {
+    if (!currentText) return;
+    timer = setTimeout(() => show(e), 500);
+  }
+
+  function move(e: MouseEvent) {
+    // Keep tooltip near cursor while hovering
+    if (!tooltipEl?.classList.contains('hu-tooltip--visible')) return;
+    const el = getTooltipEl();
+    const x = Math.min(e.clientX + 12, window.innerWidth - el.offsetWidth - 8);
+    const y = e.clientY + 20;
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
   }
 
   function leave() {
@@ -17,24 +58,26 @@ export function tooltip(node: HTMLElement, text: string) {
       clearTimeout(timer);
       timer = null;
     }
-    node.removeAttribute('title');
+    tooltipEl?.classList.remove('hu-tooltip--visible');
   }
 
   node.addEventListener('mouseenter', enter);
+  node.addEventListener('mousemove', move);
   node.addEventListener('mouseleave', leave);
 
   return {
     update(newText: string) {
-      text = newText;
-      // If title is currently set, update it immediately
-      if (node.title) {
-        node.title = newText || '';
+      currentText = newText;
+      if (tooltipEl?.classList.contains('hu-tooltip--visible')) {
+        tooltipEl.textContent = newText;
       }
     },
     destroy() {
       if (timer !== null) clearTimeout(timer);
       node.removeEventListener('mouseenter', enter);
+      node.removeEventListener('mousemove', move);
       node.removeEventListener('mouseleave', leave);
+      tooltipEl?.classList.remove('hu-tooltip--visible');
     }
   };
 }