Experimental code: please refer to the APG tooltip design pattern.

Tooltips

Two different implementations of the tooltip design pattern.

Warning: this project is moved to GitHub.

Todo:

Tooltip with additional information

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

Source

<div class="tooltip-container">
<button type="button" aria-describedby="description">
  Settings
</button>
<p id="description" role="tooltip" class="hidden">View and manage settings</p>
</div>

Tooltip as main label

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

Warning: this pattern isn’t a valid/supported usecase in ARIA 1.2.

Related GitHub issues

Note: the default position of this tooltip is set to be above the control. This is changed via the data-tooltip-position attribute on the <div> with the tooltip-container class.

Source

<div class="tooltip-container" data-tooltip-position="top">
<button type="button" aria-labelledby="tooltip" data-tooltip-position="top">
  <span aria-hidden="true">💛</span>
</button>
<p id="tooltip" role="tooltip" class="hidden">Like</p>
</div>

Keyboard support

Pressing Escape will close the tooltip.

Touch support

Tapping anywhere outside the tooltip or button will close the tooltip.

Development notes

Test results

Sometime in 2022

Tested to work with these browsers:

Tested to work with these browser/assistive technology combinations:

Notes

  1. The description is read twice

Sometime in 2019

Note: these results are from 2019. While there were no major failures in these results; it’ll be well worth running these again!

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:

Notes

  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

Special thanks