Tooltips

Todo:

• Comply with WCAG 2.1 SC 1.4.13 Content on Hover or Focus
• Do some bounding box calculations
• Clean up addEventListener code
• Rerun tests

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.

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

• Played around with pointerover and related pointer events; cool but a bit overkill here.

Test results

Sometime in 2022

Tested to work with these browsers:

• Chrome 98.0.4758.80 on macOS 11.6.2 and Windows 10
• Firefox 96.0.3 on macOS 11.6.2 and Windows 10
• Safari 15.2 on macOS 11.6.2
• Chrome 97 on Android 9
• Firefox 96 on Android 9
• Safari on iOS 15.2.1

Tested to work with these browser/assistive technology combinations:

• VoiceOver and Chrome 98.0.4758.80 on macOS 11.6.2
• VoiceOver and Safari 15.2 on macOS 11.6.2
• VoiceOver and Safari on iOS 15.2.1
• JAWS 2022.2112.24 and Chrome 98.0.4758.82 on Windows 10
• JAWS 2022.2112.24 and Firefox 96.0.3 on Windows 105
• NVIDA 2021.3.1 and Chrome 98.0.4758.82 on Windows 10
• NVIDA 2021.3.1 and Firefox 96.0.3 on Windows 10

Notes

5. 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:

• Chrome 71.0.3578.98 on macOS 10.14.3 / Windows 10
• Safari 12.0.3 on macOS 10.14.3
• Firefox 65 on macOS 10.14.3 / Windows 10
• Edge 41.16299.820.0 / EdgeHTML 16.16299 on Windows 10

Tested to work with these browser/assistive technology combinations:

• Safari 12.0.3 and VoiceOver on macOS 10.14.3
• Chrome 71.0.3578.98 and VoiceOver on macOS 10.14.3
• Chrome 71.0.3578.98 and NVDA 2018.4 on Windows 10 3
• Chrome 71.0.3578.98 and JAWS 2019 on Windows 10 3
• Edge 41.16299.820.0 / EdgeHTML 16.16299 and Narrator on Windows 10 1
• Edge 41.16299.820.0 / EdgeHTML 16.16299 and NVDA 2018.4 on Windows 10 1
• Edge 41.16299.820.0 / EdgeHTML 16.16299 and JAWS 2019 on Windows 10 1 4
• Firefox 65 and NVDA 2018.4 on Windows 10 2
• Firefox 65 and JAWS 2019 on Windows 10 3

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

• Tooltips in the time of WCAG 2.1 by Sarah Higley
• Tooltips and Toggletips by Heydon Works
• ARIA APG: Tooltip design pattern
• GitHub APG: Draft tooltip design pattern
• GitHub APG: Draft tooltip code example
• MDN: Pointer events

Special thanks

• Zachary Taylor for the bounding box calculations