Tooltip
BetaBatch A. A short text label that appears on hover and keyboard focus.
When to use
Use to name an icon-only button or to add a short hint.
When not to use
Don't put essential information or links in a tooltip. Tooltips are easy to miss and hard to use on touch screens.
Anatomy
- Trigger (any focusable element that accepts a ref, such as Button)
- Popup with text
Variants
One style. It opens on the top by default, or bottom, left or right.
States
| State | When |
|---|---|
| Closed | Default. |
| Open | 600ms after the pointer rests on the trigger, or right away on keyboard focus. |
| Closing | When the pointer leaves, focus moves away, or Escape is pressed. |