Tooltips

Two different implementations of the tooltip design pattern.

Todo:

Tooltip as main label

In this version the label for the button is privded via a aria-labelledby attribute that points to tooltip text.

Source

<button type="button" aria-labelledby="tooltip">
  <span aria-hidden>💛</span>
</button>
<p id="tooltip" role="tooltip" hidden>Like</p>

Tooltip with additional information

This implementation follows the guidance of the ARIA Authoring Practices Guide.

Source

<button type="button" aria-describedby="description">
  <span role="img" aria-label="Settings">⚙️</span>
</button>
<p id="description" role="tooltip" hidden>View and manage settings</p>

Keyboard support

Pressing Escape will close the tooltip.

Test results

The ARIA bits of this work in Safari with VoiceOver on iOS. But the tooltips themselves aren’t visible before you trigger the action. This is a limitation of the design pattern.

Tested to work in these browsers:

Tested to work with these browser/assistive technology combinations:

  1. The settings button is announced as “gear, button”. This is most likely because Edge ignores the aria-label on the span with role=img. Perhaps Edge doesn’t support the img-role.
  2. NVDA announces the settings button as “Settings, graphic, button, view and manage settings”. There’s no delay between the announcement of the button name and its description.
  3. There’s no delay between the announcement of the button name and its description.
  4. The description isn’t announced.

Resources