Tooltip
The extra, never the label. If the control needs it to be understood, the visible name is wrong.
Spec
- 400ms open delay. 0 close delay.
- Flip in the viewport.
- Also opens on focus, not hover-only.
- No interactive content. No links. No inputs.
role="tooltip". Triggeraria-describedbypoints at it.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
The extra, not the label. 400ms open, 0 close. Also focus.
Relative time stays the label. The tooltip holds the full timestamp.
28 August 2026, 10:30, Asia/JakartaDo / Don't
| Do | Don't |
|---|---|
| Extra: a full timestamp on a relative “3m”. | The only name of an icon-only button. |
| Delay 400ms. | Instant hover flicker. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| opacity | 120ms after 400ms delay | --ease-out | hover / focus | instant after delay |
| opacity | 0ms | — | leave / blur | instant |
Accessibility
- The trigger already has a name. Tooltip is the description.
- Keyboard: appears on focus, disappears on blur. Esc closes.
- Don't put the only instructions in a tooltip.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.