/** * Soul 2 Path — Tooltip system * * Sitewide custom tooltip. No third-party dependencies. * * USAGE * ───── * Add a `data-tooltip` attribute to ANY element: * * * More info * (?) * * The tooltip text auto-shows on hover/focus and hides on mouseleave/blur. * * PLACEMENT (optional) * ──────────────────── * By default, tooltips appear above the element. Override with * `data-tooltip-placement="top|right|bottom|left"`: * * * * If the chosen placement would push the tooltip off-screen, JS automatically * flips it to the opposite side. * * DELAY (optional) * ──────────────── * Default show-delay is 300ms. Override per element with * `data-tooltip-delay="0"` for instant, or any millisecond value: * * * * VARIANTS (optional) * ─────────────────── * `data-tooltip-variant="primary"` — palette primary background (default is dark) * `data-tooltip-variant="light"` — white background, dark text * * PROGRAMMATIC API * ──────────────── * Show a tooltip via JS (e.g. after a button click, a form validation, etc.): * * window.S2PTooltip.show(element, 'Saved!', { variant: 'primary', duration: 2000 }); * window.S2PTooltip.hide(element); * * ACCESSIBILITY * ───────────── * - Tooltips appear on focus too (not just hover) — keyboard users see them * - aria-describedby links the trigger to the tooltip text for screen readers * - Escape dismisses an open tooltip * - On touch devices, long-press shows; tap-outside hides */ /* ============================================================ 1. The tooltip element itself The tooltip is one shared element appended to and repositioned for whichever trigger is active. Only one tooltip visible at a time. ============================================================ */ .s2p-tooltip { /* Hidden by default — JS adds [data-visible] when active */ position: fixed; /* fixed = positioned relative to viewport, avoids issues with scrolled containers */ top: 0; left: 0; z-index: var(--z-modal); /* Typography */ font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; white-space: nowrap; /* short labels stay on one line */ max-width: 240px; /* but long ones can wrap up to this */ /* Surface */ background: var(--color-text-strong); color: var(--color-text-on-primary); padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: 0 4px 12px var(--color-shadow); /* Animation in/out */ opacity: 0; transform: translate(0, 0) scale(0.96); pointer-events: none; -webkit-transition: opacity var(--transition-fast), transform var(--transition-fast); transition: opacity var(--transition-fast), transform var(--transition-fast); } .s2p-tooltip[data-visible="true"] { opacity: 1; transform: translate(0, 0) scale(1); } /* Long-text tooltips need to wrap, not stay on one line */ .s2p-tooltip[data-multiline="true"] { white-space: normal; } /* ============================================================ 2. Variants — swap colours for different contexts ============================================================ */ .s2p-tooltip[data-variant="primary"] { background: var(--color-primary); color: var(--color-text-on-primary); } .s2p-tooltip[data-variant="light"] { background: var(--color-bg); color: var(--color-text-strong); border: 1px solid var(--color-border); box-shadow: 0 6px 16px var(--color-shadow); } /* ============================================================ 3. Pointer arrow — a small triangle pointing back at the trigger. Built with a rotated square inside an ::after pseudo for clean edges regardless of background colour. ============================================================ */ .s2p-tooltip::after { content: ''; position: absolute; width: 8px; height: 8px; background: inherit; /* matches the tooltip body colour */ transform: rotate(45deg); /* Default position is updated per-placement below */ } /* Placement: tooltip above trigger → arrow at bottom of tooltip */ .s2p-tooltip[data-placement="top"]::after { bottom: -4px; left: 50%; margin-left: -4px; } /* Tooltip below trigger → arrow at top */ .s2p-tooltip[data-placement="bottom"]::after { top: -4px; left: 50%; margin-left: -4px; } /* Tooltip to the right → arrow on left */ .s2p-tooltip[data-placement="right"]::after { left: -4px; top: 50%; margin-top: -4px; } /* Tooltip to the left → arrow on right */ .s2p-tooltip[data-placement="left"]::after { right: -4px; top: 50%; margin-top: -4px; } /* Light variant needs border on the arrow too so it doesn't look like the tooltip body is just floating */ .s2p-tooltip[data-variant="light"][data-placement="top"]::after, .s2p-tooltip[data-variant="light"][data-placement="bottom"]::after, .s2p-tooltip[data-variant="light"][data-placement="left"]::after, .s2p-tooltip[data-variant="light"][data-placement="right"]::after { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .s2p-tooltip[data-variant="light"][data-placement="bottom"]::after { border-right: none; border-bottom: none; border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border); } .s2p-tooltip[data-variant="light"][data-placement="right"]::after { border-right: none; border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border); border-top: none; } .s2p-tooltip[data-variant="light"][data-placement="left"]::after { border-right: 1px solid var(--color-border); border-bottom: none; border-left: none; border-top: 1px solid var(--color-border); } /* ============================================================ 4. Subtle "from-direction" entrance animation Each placement slides in from its respective direction (4px) for a subtle but polished feel — never overdone, just enough to feel alive. ============================================================ */ .s2p-tooltip[data-placement="top"] { transform: translate(0, 4px) scale(0.96); } .s2p-tooltip[data-placement="bottom"] { transform: translate(0, -4px) scale(0.96); } .s2p-tooltip[data-placement="left"] { transform: translate(4px, 0) scale(0.96); } .s2p-tooltip[data-placement="right"] { transform: translate(-4px, 0) scale(0.96); } .s2p-tooltip[data-visible="true"] { transform: translate(0, 0) scale(1); } /* ============================================================ 5. Trigger styling — element with data-tooltip gets a subtle hint that it has more info (just a slight cursor change). Nothing visual so it doesn't clash with the underlying element's own styles. ============================================================ */ [data-tooltip] { /* Help cursor on hover for non-button/link elements */ cursor: help; } /* Don't override the cursor on actual interactive elements — they have their own (pointer for buttons/links, text for inputs, etc.) */ a[data-tooltip], button[data-tooltip], input[data-tooltip], select[data-tooltip], textarea[data-tooltip], [role="button"][data-tooltip] { cursor: inherit; } /* ============================================================ 6. Reduced-motion — respect users who've turned off animations ============================================================ */ @media (prefers-reduced-motion: reduce) { .s2p-tooltip { -webkit-transition: opacity var(--transition-fast); transition: opacity var(--transition-fast); transform: none !important; } }