Warm tooltips are instant

In a toolbar only the first tooltip waits; neighbours open instantly.

Emil Kowalski@emilkowalski

Tooltips should have a delay before appearing to prevent accidental activation. Once a tooltip is open, hovering over other tooltips should open them with no delay and no animation. This feels faster without defeating the purpose of the initial delay.

7 Practical Animation TipsRead article ↗

From improve-animations; Radix calls it skipDelayDuration.

Sweep a toolbar

Rest on the first icon, then slide across. Or press Sweep.

Delay 500ms Dwell 350ms

Every tooltip waitsBad

delay + 150ms fade, every time0/80ms

Only the first waitsGood

[data-instant] { transition-duration: 0ms }0/80ms

.tooltip {
  opacity: 0;
  transform: scale(0.97);
  transform-origin: 50% 100%;
  transition: opacity 100ms var(--ease-out), transform 100ms var(--ease-out);
}
.tooltip.open { opacity: 1; transform: none; transition-duration: 150ms; }
.tooltip[data-instant] { transition-duration: 0ms; }

The warm window

Set the gap and window, then run it.

Window 300ms Gap 200ms

Delay 500ms, then warmCold

skipDelayDuration

function onEnter(trigger) {
  if (performance.now() < warmUntil) return open(trigger, { instant: true });
  timer = setTimeout(() => open(trigger, { instant: false }), DELAY);
}

function onLeave() {
  clearTimeout(timer);
  if (isOpen()) warmUntil = performance.now() + WARM_WINDOW;
  close();
}

What it costs a day

Labels read per pass, and passes per day.

Labels Passes

	Every tooltip waits	Warm after the first
Per pass	3.9s	650ms
Per day	2m 36s	26s
Saved per day	0	2m 10s

Why it matters

The delay filters a passing cursor. Once one opens, intent is shown.

Pros

Scanning costs one delay, not eight.
Still ignores accidental hovers.
Built into Radix as skipDelayDuration.

Cons

A long window makes labels sticky.
Scope it per group, or unrelated toolbars warm up.
Touch has no hover; visible labels help there.