Tooltip
Short message communicating the function or context of a control or object.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Ensure all tooltips are accessible using the keyboard as well as a mouse.
- Ensure the tooltip is attached to a focusable trigger object.
- Ensure the tooltip’s triggering object has
with a value of the tooltip span’s .
Keyboard controls
| Key | Behavior |
|---|---|
| Tab | Moves focus to the tooltip’s trigger object. When that object is receives focus, the tooltip appears. When it loses focus, the tooltip disappears. |
| Esc | Dismisses tooltip. |