Tooltip Spring

Micro-interactionVanilla JS · zero dependenciesOne spring, one div

-- fps

prefers-reduced-motion detected — tooltips fade without the spring

X-ray · layers

Springpops with physics (off = plain fade)

Arrowthe little pointer triangle

Hover intentwaits before showing (off = instant)

Parameters

Stiffness0.18

Damping0.74

Lift distance12 px

Intent delay250 ms

your version · updates as you tinker

How this effect works

Most tooltips fade in with a canned CSS animation, and that's exactly why they feel bureaucratic. This one runs a real spring on its scale: showing sets the target to 1, hiding sets it to 0, and every frame velocity accumulates toward the target (stiffness) and bleeds away (damping). The pop overshoots slightly, wobbles, and settles — the same physics grammar as our buttons and tabs, which is what makes a site feel like one coherent material.

The hover intent layer is the professional detail nobody notices until it's missing: a small delay before showing means tooltips don't fire as your cursor merely passes through on the way somewhere else. The arrow is a rotated square peeking from under the bubble; it inherits the spring for free because it lives inside the tooltip. One div serves every target — it just teleports and re-springs.

Production notes: respects prefers-reduced-motion (simple fade, no spring) · one tooltip element reused for all targets · works on focus too — keyboard users get the same tooltips · the copied snippet is self-contained HTML + CSS + JS.