Components / Base / Tooltip
B10 · Base
Tooltip
A description that appears after a 220 ms dwell, or at once on keyboard focus.
<button type="button" aria-describedby="tip-archive">Archive</button>
<span id="tip-archive" role="tooltip" hidden>Removes the row from this example.</span>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A control’s name is clear and a second sentence helps.
- The sentence is short.
When not to use
- The text is required to use the control. Put it on the page.
- The text is an error.
Usage
<button type="button" aria-describedby="tip-archive">Archive</button>
<span id="tip-archive" role="tooltip" hidden>Removes the row from this example.</span>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| aria-describedby | id | — | Associates the button with the tooltip. |
| role=tooltip | attribute | — | On the description. |
| dwell | 220 ms | 220 ms | Pointer delay. Focus shows it at once. |
Keyboard
| Key | Action |
|---|---|
| Tab | Focus shows the tooltip. |
| Escape | Is not required. Blur hides it. |
Accessibility
- The button name stands alone.
- The tooltip is a description, not the name.
- Keyboard focus does not wait.
Motion
- Show and hide are instant after the dwell.
Pattern origin
Base hint. Dwell matches the hover-intent timing.