Tooltip

A tooltip is a floating text label
providing additional or explanatory information

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

Magenta A11y | W3C | Mozilla