Think of it as a footnote mark that grows a preview on hover — not a standalone tooltip widget floating somewhere else on the page.

One relative <span> wraps both the pill and the card. That is the whole trick:

1. Pill — a tiny numbered <a>, always mid-sentence.
2. Card — mounts only while open, as absolute bottom-full on that same wrapper, centered with -translate-x-1/2. So it is parked on the pill, not on the paragraph.
3. Caret — a rotated square at the card's bottom edge; because the card is centered on the wrapper, the caret points at the number.

Closed = pill alone. Open = the same wrapper with the card mounted above the pill. If the caret misses the number, the card is parented wrong.

The pill and the card don't touch — there's a couple of pixels of dead air between them, plus the mb-2 gap the card sits in. Close on mouseleave and moving your pointer from the pill toward the card would close it before you arrive. Two setTimeouts fix that: show fires after 80ms, hide after 120ms, and every re-entry (pill or card) clears whichever timer is pending. The 40ms gap between them means a hide that was already queued gets cancelled the moment your cursor lands anywhere in either element.

const show = () => {
  clearTimeout(timer.current);
  timer.current = setTimeout(() => setOpen(true), 80);
};
const hide = () => {
  clearTimeout(timer.current);
  timer.current = setTimeout(() => setOpen(false), 120);
};
// the card itself repeats onMouseEnter={show} onMouseLeave={hide}

Keyboard users skip the timers entirely — onFocus/onBlur on the anchor flip open immediately, so tabbing to a pill opens the card exactly like a deliberate hover would, with no delay to wait out.

Once open flips, AnimatePresence mounts the card off initial={{ opacity: 0, y: 6, scale: 0.96 }} into a spring — stiffness: 320, damping: 32, mass: 0.9. That ratio sits close to critically damped: fast, with barely a flicker of overshoot past scale: 1, nothing like a springy button's bounce. Exit runs the same shape in reverse, so closing doesn't feel like a different animation.

y and scale are the only two properties animating, and both are transforms — the browser composites the card on the GPU without touching layout or paint. A spring over a fixed-duration ease also means the exit feels continuous with whatever point the enter had reached: if you close the card mid-pop, the spring reverses from there instead of snapping or restarting a separate timeline.

SourceList is a flatter problem: no hover, no positioning math, just an ordered stack that needs to feel alive without dragging every row in one at a time. Each row's entrance carries delay: Math.min(i, previewCount) * 0.05 — capped at previewCount so a 20-source list still finishes staggering inside a quarter second. Collapsed, only the first previewCount rows exist; the "+N more" toggle mounts the rest, and they run the identical fade-up on their own delay.

The exit is deliberately shorter than the enter (0.15s vs 0.3s) — rows leaving on collapse shouldn't linger as long as rows arriving.

Both pieces together — the real components. Hover a pill or tab to one to feel the spring; open the collapsed rows below to feel the stagger.

Two small mechanisms doing all the work: a wrapper that opens a card exactly where you're looking, bridged by two timers so the gap between them never trips you up, and a list that arrives one row at a time without ever making you wait for it.