🐐

js/tooltips.js

@@ -0,0 +1,43 @@
+// ── Tag pill tooltips: tap toggle (touch devices only) ────────
+(function () {
+  // Hover-capable devices already get the tooltips via :hover
+  if (window.matchMedia('(hover: hover)').matches) return;
+
+  const pills = [...document.querySelectorAll('[data-tip]')];
+
+  function closeAll() {
+    pills.forEach(p => {
+      p.classList.remove('tip-open');
+      p.setAttribute('aria-expanded', 'false');
+    });
+  }
+
+  pills.forEach(pill => {
+    pill.setAttribute('tabindex', '0');
+    pill.setAttribute('role', 'button');
+    pill.setAttribute('aria-expanded', 'false');
+    // Pseudo-element tooltips are invisible to screen readers
+    pill.setAttribute('aria-description', pill.dataset.tip);
+
+    pill.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const wasOpen = pill.classList.contains('tip-open');
+      closeAll();
+      if (!wasOpen) {
+        pill.classList.add('tip-open');
+        pill.setAttribute('aria-expanded', 'true');
+      }
+    });
+    pill.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        pill.click();
+      }
+    });
+  });
+
+  document.addEventListener('click', closeAll);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeAll();
+  });
+})();