Jump to main content

Tooltips

How it works

A tooltip is text that appears in a small overlay on demand, usually when hovering over the thing it describes. It is hidden by default, and becomes available on hover or focus of the control it describes. It should provide information that isn’t self explanatory or well known.

Considerations

This component strives to follow WCAG 2.2 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:

  • Be sure to include the aria-describedby attribute with the id of the description.
  • They should be discoverable, avoid placing them in over a word in a sentence for example.
  • Avoid using tooltips to provide instructions or guidance, or any rich information.
  • They shouldn’t be used on disabled elements. It should be clear to the user why the button is disabled without the tooltip.

Resources