Tooltips

Two different implementations of the tooltip design pattern. Both implementation comply with WCAG 2.1 SC 1.4.13 Content on Hover or Focus.

Tooltip with additional information

These implementations follow the guidance of the ARIA Authoring Practices Guide.

On a button

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>

On a link

After lunch we drove up the Sustenpass to take a group photo.

Source

<p>
  After lunch we drove up the
  <span class="tooltip-container">
    <a href="https://www.alpen-paesse.ch/en/alpenpaesse/sustenpass/" aria-describedby="link-description" data-tooltip-trigger>
      Sustenpass
    </a>
    <span id="link-description" role="tooltip" class="hidden">A beautiful road in Switzerland</span>
  </span>
  to take a group photo.
</p>

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">
    <span aria-hidden="true">đź’›</span>
  </button>
  <p id="tooltip" role="tooltip" class="hidden">Like</p>
</div>

Issues

Tooltips are a good way to show sighted people what a control does. For a person that relies on the accessibility information this approach doesn’t add much.

For example, Jane (she/her), an avid user of JAWS lands on this control. JAWS happily announces that it’s a button with the label “Like”. Jane, eager to explore, moves into the tooltip only to find the exact same text. This isn’t the worst experience but certainly not the best either.

In a scenario like this, where the tooltip only adds information for sighted people, it would make a lot more sense to not use the tooltip role. The accessible name can still be linked with aria-labelledby. 

<div class="tooltip-container">
  <button type="button" aria-labelledby="tooltip">
    <span aria-hidden="true">đź’›</span>
  </button>
  <p id="tooltip" class="hidden">Like</p>
</div>

At this point it might be worth to reconsider if ARIA is needed to set the accessible name. After all the first rule of ARIA is to not use it if you can do without. An accessible name can also be provided with a visually hidden span inside the button: 

<div class="tooltip-container">
  <button type="button">
    <span aria-hidden="true">đź’›</span>
    <span class="visually-hidden">Like</span>
  </button>
  <p id="tooltip" class="hidden">Like</p>
</div>

Interaction models

This design pattern supports these interaction models:

Keyboard

  • Tooltip is shown when focus is set on the tooltip trigger
  • Tooltip is hidden when the tooltip trigger loses focus

Pressing Escape will close the tooltip.

Mouse

  • Tooltip is shown when the cursor enters the tooltip trigger
  • Tooltip is hidden when the cursor leaves the tooltip trigger (except if cursor moves onto the tooltip itself)

Touch

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