Tooltip Accessibility
Best Practices
First of all, the HTML title attribute is not an accessible tooltip. Read the title tooltip anti-pattern for more details.
Secondly, the tooltip must describe the host element only. Do not create a host element (e.g. a button) purely for the sake of displaying an overlay. If that is your wish, consider the Infotip pattern instead.
Tooltip must not be applied to static elements. See the non-interactive hover anti-pattern.
Tooltip must not use the aria-haspopup attribute. Tooltips are not considered ‘popups’ in this context.
Tooltip should not be more than one sentence. Consider using the Infotip pattern for longer content.
Tooltip should follow the principal of progressive disclosure - revealing the right information, at the right time.
If the tooltip conveys crucial information, overlay content should be visible in a no-JavaScript state (i.e. use progressive enhancement).
Interaction Design
This section provides the pattern interaction design for keyboard, screen reader, mouse & touch.
Keyboard
Host must be keyboard focusable.
Overlay must appear after short delay when host receives focus.
Keyboard focus order must move from host to first focusable control in overlay.
Overlay must disappear when focus leaves popover or when `ESC key is pressed.
Focus should not move to overlay element itself, only its focusable children.
Screenreader
Assistive technology that supports tooltip role will announce the overlay content after a short delay. This delay is configurable in most screen readers.
Reading order must flow directly from host into overlay.
Mouse
Overlay must appear after short delay whenever host receives mouseover.
Overlay must disappear when neither the host or overlay have mouseover.
Pointer
Many touch devices do not support hover interactions!
You should consider using the click-activated Bubble Help pattern instead.
FAQ
What is the difference between Infotip Button and Tooltip?
A tooltip provides a tip about the primary action of an interactive element (typically a button). For example, the trashcan icon button in your mail application. The tooltip can be thought of as the secondary action of the button. It is always triggered by focus and hover.
An infotip button provides a tip about a nearby static element or content. It is always triggered by click.
This is different to the way Bootstrap Tooltip works. Why?
The fundamental difference is that the Bootstrap Tooltip get it’s content from the title attribute, whereas the pattern presented here gets it’s content from an element’s innerHTML. This allows us to more easily place HTML such as hyperlinks inside of our tooltips and, unlike Bootstrap, the tooltip content will be fully accessible without JavaScript.
Why do we need JavaScript at all? Can’t we do a tooltip with just CSS?
A pure CSS solution only gets us so far, it could not cover the following situations:
- Delay before showing overlay
- Keyboard focus management
- Overlay re-positioning logic when scrolling or near edge of screen