Tooltip

A tooltip is a small popup that provides supplementary information about an element. It appears near its trigger and stays hidden until activated.

Tooltips can be used to clarify the meaning of terms and abbreviations that benefit from a brief explanation. They are not suited for essential information, as they can be difficult to discover for some users.

Accessibility Features

  • A tooltip is activated when a dedicated trigger button either receives hover or focus, or is pressed. Using a pressable trigger button is more reliable than solely hover- or focus-based activation, which can behave inconsistently on touchscreens.
  • If a tooltip obscures content, it must be dismissible with Esc.

Tooltip

A standard tooltip is activated when the trigger button receives focus or hover.

  • aria-describedby associates the tooltip with the trigger button.
  • role="tooltip" identifies the tooltip.

Example

Code Snippet

Toggletip

A toggletip is activated by pressing the trigger button. It is practically a custom accordion.

  • aria-expanded on the trigger button communicates the expanded or collapsed state to screen readers.
  • aria-controls on the trigger button points to the tooltip.

Example

Code Snippet