Theme
Tooltip
A short description shown on hover and keyboard focus.
Examples
Props
Tooltip
A short description shown on hover and on keyboard focus, and dismissed with Escape (WCAG 1.4.13). Touch has no hover, so never put essential information in one.
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | — | The tip. Keep it short; it must not hold anything the reader needs to act on. |
placement? | "bottom" | "end" | "start" | "top" | "top" | |
children | ReactNode | — | The element it describes: a Button or IconButton, which can take focus. |
Also takes 8 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Tab | Focusing the trigger shows the tooltip |
| Escape | Hides it |
Accessibility
- Linked to its trigger with aria-describedby; dismissable, hoverable and persistent (WCAG 1.4.13).
- Touch has no hover: never put information there that is needed to act.