Overview
A tooltip is a popup revealing information associated with an element when the element gains keyboard focus or when the mouse hovers over it. Usually, it appears after a brief delay and vanishes upon pressing the Escape key or when the mouse moves away.
Be aware: a lot of accessibility resources advise against using tooltips as screen reader implementation varies heavily. While MDX offers tooltip for usage, we recommend using UI that is self-explanatory and doesn't need any additional information. You can always opt to use a Modal if you need to display additional, important information that is necessary to understand the UI.
WAI-ARIA
- Display breadcrumbs in a container using the role tooltip
- Add aria-describedby
Keyboard Interactions
tab |
Focus moves to the element, opens tooltip |
escape |
Closes tooltip |
Further Links
Magenta A11y | W3C | Mozilla