Data display
Tooltip
Short helper text on hover or focus of an interactive trigger.
Examples
Hover or focus the button. Press Esc to dismiss.
Copies the link to your clipboard
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Trigger | Any focusable element | Required |
| 2 | Bubble | Glass, 12px blur, drop shadow | Required |
| 3 | Arrow | Optional | Optional |
Specifications
| Surface | Glass with drop shadow, 12px blur |
|---|---|
| Trigger | Hover and focus |
Interaction
| Key | Result |
|---|---|
| Tab | Focus on the trigger shows the tooltip |
| Esc | Dismisses without moving focus |
| Trigger | Response |
|---|---|
| Hover | Shows after about 500ms and stays while the pointer is on the trigger or the bubble |
| Leave | Hides after 100ms |
Accessibility
role · tooltip
1.4.13Content on Hover or Focus2.1.1Keyboard4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Association | aria-describedby from the trigger to the bubble |
| Content | Plain text only: no links or buttons |
| WCAG 1.4.13 | Dismissable (Esc), hoverable and persistent |
| Touch | Do not depend on it; the same information must exist elsewhere |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use it to name icon buttons or to add a hint | Do not put essential information only in a tooltip |
| Do not put interactive content in it (use Popover) |