Tooltip Gallery

Design explorations for a system-wide tooltip pattern. Hover each badge to compare.

The Problem

The rationale tooltip on proposed AutoCode badges uses inverted colours (solid black/white) that feel heavy and intrusive. It appears instantly with no delay or animation, which means the user doesn't get a chance to register the hover state on the badge before the tooltip fires. This gallery explores softer alternatives with deliberate timing.

The goal is to pick one tooltip pattern that works system-wide: rationale tooltips on proposed badges, analysis cell tooltips, metric label hints, and any future tooltips.

Variants

A — Current (inverted, instant)

"Maybe I want to go back to... Products. Rooms. The bedroom. Ideas. What's the way to the bed section again."
[01:32] — p4
confusion navigation pattern The participant describes their path through different areas ('Products. Rooms. The bedroom') and notes they've 'flung my way to the bed section again', commenting on the navigation system.

High-contrast inverted box. No delay, no animation. Appears instantly on hover — blocks the quote text.

B — Soft surface, 300ms delay, fade + settle

"Maybe I want to go back to... Products. Rooms. The bedroom. Ideas. What's the way to the bed section again."
[01:32] — p4
confusion navigation pattern The participant describes their path through different areas ('Products. Rooms. The bedroom') and notes they've 'flung my way to the bed section again', commenting on the navigation system.

Page-coloured surface with border + shadow (matches cell-tooltip). 300ms delay before appearing. 4px settle — fades in while floating down into position (180ms ease).

C — Soft surface, 500ms delay (Material-style)

"Maybe I want to go back to... Products. Rooms. The bedroom. Ideas. What's the way to the bed section again."
[01:32] — p4
confusion navigation pattern The participant describes their path through different areas ('Products. Rooms. The bedroom') and notes they've 'flung my way to the bed section again', commenting on the navigation system.

Same soft surface but with 500ms delay (Material Design recommendation). Prevents accidental triggers during fast mouse movement. Same 4px settle animation.

D — Soft surface, float-down-from-above (8px travel, 300ms delay) recommended

"Maybe I want to go back to... Products. Rooms. The bedroom. Ideas. What's the way to the bed section again."
[01:32] — p4
confusion navigation pattern The participant describes their path through different areas ('Products. Rooms. The bedroom') and notes they've 'flung my way to the bed section again', commenting on the navigation system.

The "floats down from heaven" pattern — tooltip starts 8px above final position, eases down over 200ms with fade. 300ms hover delay lets the user register the badge hover state first. Feels like Teams/Figma/macOS popovers.

E — Same as D, muted text colour

"Maybe I want to go back to... Products. Rooms. The bedroom. Ideas. What's the way to the bed section again."
[01:32] — p4
confusion navigation pattern The participant describes their path through different areas ('Products. Rooms. The bedroom') and notes they've 'flung my way to the bed section again', commenting on the navigation system.

Same animation as D but tooltip text uses muted grey instead of primary text colour. Quieter — the rationale is secondary information, doesn't compete with quote text.

F — Frosted glass (backdrop-filter)

"Maybe I want to go back to... Products. Rooms. The bedroom. Ideas. What's the way to the bed section again."
[01:32] — p4
confusion navigation pattern The participant describes their path through different areas ('Products. Rooms. The bedroom') and notes they've 'flung my way to the bed section again', commenting on the navigation system.

Translucent background with backdrop blur. Same float-down animation as D. Elegant but may feel out of place in the current design system. Uses color-mix() + backdrop-filter.

Timing Reference

Property Value Rationale
hover delay 300ms Lets user register badge hover state before tooltip fires. Browser title attrs use ~500ms; 300ms is deliberate but not sluggish.
animation duration 200ms Industry standard for micro-animations. Perceptible but doesn't feel slow.
travel distance 8px Enough to read as "descending into position" without being distracting. 4px feels static; 12px feels bouncy.
easing ease-out Decelerates into final position — feels like gravity/settling.
exit instant (0s delay) No delay on mouse-out — tooltip should disappear immediately. The transition-delay: 0s on the base state handles this.

System-Wide Audit

All tooltip-like elements in the app that should adopt the chosen pattern:

Element Current Style Needs Update?
Rationale tooltip (proposed badges) Inverted, instant, no animation Yes — primary target
Cell tooltip (analysis heatmap) Soft surface, 120ms fade+slide, no delay Add 300ms delay + align animation
Title attributes (toolbar, metrics, etc.) Native browser tooltip No — leave native for simple labels
Hidden quotes dropdown Click-triggered, no animation No — click menus are different from hover tips

Design decision: Native title attributes stay for simple icon labels (one or two words). Custom tooltips are for content — rationale text, quote previews, metric details — where we control timing and styling.