Tooltip
An explanation that appears on mouse hover and on keyboard focus, can be closed with Escape, and doesn't disappear while you're pointing at it.
Demo
We evaluate against
Why it is accessible
Success criterion 1.4.13 places three requirements on content that appears on hover, and ordinary tooltips meet none of them. This one meets all three: it can be dismissed with Escape without moving focus, it is hoverable, meaning you can move the mouse from the trigger onto the tooltip text and it won't disappear (important at high zoom levels), and it is persistent, because it has no timer.
The tooltip is attached to the button as its description via aria-describedby, so a screen reader reads it out on focus, even though it only appears visually after a short delay. The trigger is always a focusable element; a tooltip on plain text would never be discovered by a keyboard user.
Test it yourself
Keyboard
- Tab to the WCAG 2.2 abbreviation: the tooltip appears.
- Escape hides it; focus stays on the abbreviation.
Screen reader
- On focus you hear the button's name, immediately followed by the tooltip text as its description.
Zoom and reflow
- At 400% zoom the tooltip wraps and stays entirely on screen; if there's no room above it, it appears below the abbreviation.
- Move the mouse from the abbreviation onto the tooltip: it doesn't disappear.
Without JavaScript
The explanation is shown directly in the text, in brackets after the abbreviation. The information is never missing.
Code to copy
<ad-tooltip>
<button type="button" aria-describedby="tip-wcag">WCAG 2.2</button>
<span role="tooltip" id="tip-wcag">Web Content Accessibility Guidelines 2.2 …</span>
</ad-tooltip>
<link rel="stylesheet" href="/assets/js/components/ad-tooltip/ad-tooltip.css">
<script type="module" src="/assets/js/components/ad-tooltip/ad-tooltip.js"></script>