spoko-design-system 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.36.0](https://github.com/polo-blue/sds/compare/v1.35.1...v1.36.0) (2026-03-24)
+
+### Features
+
+* add interactive tooltip mode ([#410](https://github.com/polo-blue/sds/issues/410)) ([473a586](https://github.com/polo-blue/sds/commit/473a5869a765af1b347b2e909f4019bacf3255fd))
+
+## [1.35.1](https://github.com/polo-blue/sds/compare/v1.35.0...v1.35.1) (2026-03-24)
+
+### Bug Fixes
+
+* tooltip listeners lost after Astro View Transitions ([#409](https://github.com/polo-blue/sds/issues/409)) ([4fe9dd4](https://github.com/polo-blue/sds/commit/4fe9dd4d80a15edad47c277c233fb153072a2619))
+
 ## [1.35.0](https://github.com/polo-blue/sds/compare/v1.34.26...v1.35.0) (2026-03-24)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",

package/src/scripts/tooltips.ts

@@ -2,12 +2,13 @@
  * SDS Tooltip Engine
  * Powered by Floating UI — replaces tippy.js
  *
- * Uses event delegation on document.body for performance.
+ * Uses event delegation on document (capture phase) for performance.
  * Handles tooltips for any element with [data-sds-tooltip] attribute.
  *
  * Supported attributes:
- * - data-sds-tooltip        — HTML content to display
- * - data-sds-tooltip-placement — placement override (default: 'top')
+ * - data-sds-tooltip             — HTML content to display
+ * - data-sds-tooltip-placement   — placement override (default: 'top')
+ * - data-sds-tooltip-interactive — allow hovering over tooltip (for clickable links)
  */
 
 import { computePosition, autoUpdate, offset, flip, shift, arrow, type Placement } from '@floating-ui/dom';
@@ -19,6 +20,7 @@ const ARROW_SIZE = 8;
 const SHIFT_PADDING = 5;
 const SHOW_DELAY = 80;
 const HIDE_DELAY = 60;
+const INTERACTIVE_HIDE_DELAY = 150;
 
 let tooltipEl: HTMLElement | null = null;
 let arrowEl: HTMLElement | null = null;
@@ -28,6 +30,7 @@ let currentTarget: HTMLElement | null = null;
 let showTimer: ReturnType<typeof setTimeout> | null = null;
 let hideTimer: ReturnType<typeof setTimeout> | null = null;
 let initialized = false;
+let isInteractive = false;
 
 const OPPOSITE_SIDE: Record<string, string> = {
   top: 'bottom',
@@ -125,6 +128,10 @@ export function showTooltip(target: HTMLElement) {
   tooltip.style.display = 'block';
   currentTarget = target;
 
+  // Interactive mode: allow hovering over tooltip for clickable content
+  isInteractive = target.hasAttribute('data-sds-tooltip-interactive');
+  tooltip.classList.toggle('sds-tooltip--interactive', isInteractive);
+
   // Start auto-updating position
   cleanupAutoUpdate?.();
   cleanupAutoUpdate = autoUpdate(target, tooltip, () => {
@@ -155,7 +162,18 @@ export function hideTooltip() {
 }
 
 function handleMouseEnter(e: Event) {
-  const target = (e.target as HTMLElement).closest?.(SELECTOR);
+  const el = e.target as HTMLElement;
+
+  // Hovering over the tooltip itself — cancel pending hide
+  if (isInteractive && tooltipEl && (el === tooltipEl || tooltipEl.contains(el))) {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    return;
+  }
+
+  const target = el.closest?.(SELECTOR);
   if (!(target instanceof HTMLElement)) return;
 
   if (hideTimer) {
@@ -171,7 +189,18 @@ function handleMouseEnter(e: Event) {
 }
 
 function handleMouseLeave(e: Event) {
-  const target = (e.target as HTMLElement).closest?.(SELECTOR);
+  const el = e.target as HTMLElement;
+
+  // Leaving the tooltip itself — schedule hide
+  if (isInteractive && tooltipEl && (el === tooltipEl || tooltipEl.contains(el))) {
+    hideTimer = setTimeout(() => {
+      hideTooltip();
+      hideTimer = null;
+    }, INTERACTIVE_HIDE_DELAY);
+    return;
+  }
+
+  const target = el.closest?.(SELECTOR);
   if (!(target instanceof HTMLElement)) return;
 
   if (showTimer) {
@@ -179,10 +208,11 @@ function handleMouseLeave(e: Event) {
     showTimer = null;
   }
 
+  const delay = isInteractive ? INTERACTIVE_HIDE_DELAY : HIDE_DELAY;
   hideTimer = setTimeout(() => {
     hideTooltip();
     hideTimer = null;
-  }, HIDE_DELAY);
+  }, delay);
 }
 
 function handleFocusIn(e: Event) {
@@ -203,10 +233,13 @@ export function initTooltips() {
   if (initialized) return;
   initialized = true;
 
-  document.body.addEventListener('mouseenter', handleMouseEnter, true);
-  document.body.addEventListener('mouseleave', handleMouseLeave, true);
-  document.body.addEventListener('focusin', handleFocusIn, true);
-  document.body.addEventListener('focusout', handleFocusOut, true);
+  // Use `document` instead of `document.body` — Astro View Transitions
+  // replace the <body> element during swap, which would lose listeners.
+  // `document` persists across navigations.
+  document.addEventListener('mouseenter', handleMouseEnter, true);
+  document.addEventListener('mouseleave', handleMouseLeave, true);
+  document.addEventListener('focusin', handleFocusIn, true);
+  document.addEventListener('focusout', handleFocusOut, true);
 }
 
 function cleanup() {

package/src/styles/sds-tooltip.css

@@ -30,6 +30,15 @@
   opacity: 1;
 }
 
+/* Interactive mode — allow hovering over tooltip for clickable content */
+.sds-tooltip--interactive {
+  pointer-events: auto;
+}
+
+.sds-tooltip--interactive a {
+  pointer-events: auto;
+}
+
 /* Arrow */
 .sds-tooltip-arrow {
   position: absolute;