A tooltip – widely used feature across the web. Hundred of different approaches and implementations. The ARIA Authoring Practices Guide (APG) defines the tooltip in following way:
A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.
A tooltip is a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.
The document Pop Up API (Explainer) indicates that creating a tooltip – contrary to popular belief, isn’t an easy task.
How do you code tooltips?
Let’s take a challenge to create a custom tooltip. Before everything let’s first define the basic requirements for the tooltip.
- Tooltips should only be displayed for interactive elements.
- Must be positioned automatically to fit into the visible area.
- Tooltips must be discoverable and readable with a mouse, other pointer devices, keyboard, screen reader, zoom software, and any other assistive technology.
- Must be triggered by both
- We’ll use
aria-labelledbycan be used as well) to associate the UI control with the tooltip content. Note: avoid
- Should allow to use HTML. Note: use only without interactive elements inside.
- Follow WCAG technique
Making content on focus or hover hoverable, dismissible, and persistentthat relates to Success Criterion 1.4.13: Content on Hover or Focus.
prefers-reduced-motionto customise the animation (fade in and fade out) based on the user settings. See also Responsive Design for Motion (WebKit Blog) that includes vestibular motion trigger examples.
Requirement – reduce motion using CSS prefers-reduced-motion
Most operating systems, and by that browsers through
prefers-reduced-motion media query, allow us to reduce motion where the user can stop or reduce the movement of some elements on the screen. For those who suffer from vertigo or motion sickness, this feature is extremely helpful. Here is an example from the Mac OS:
There are many articles like
How To Make Tooltips With Only CSS,
Pure CSS Tooltip | How To Create Tooltips using CSS3 or
Is our tooltip implementation ideal?
No. It’s just another implementation that we believe works fine but doesn’t mean it covers all possible user scenarios or has no issues. Feel free to leave a comment.
Real code example
Let’s see then how a tooltip could be implemented.
- Go to SiteLint Platform Tools page.
- Scroll down to the footer (very bottom of the page).
- See the tooltip next to the
How a screen reader works with our tooltip (video)
macOS Monterey (12.6 (21G115)), Chrome Version 106.0.5249.91 (Official Build) (x86_64)
Questions related to the tooltip
Do screen readers read tooltips?
They do read the tooltip, but it all depends on the implementation and what’s being exposed to the screen reader, but if created correctly then they should read the tooltip content. Just like any other HTML content.
How does a user access a tooltip?
Through a device type like mouse, pen, touch.
Why is it called a tooltip?
Because they are typically used to provide contextual and usage information to the many tools in an application without having to study extensive manuals and other documentation, they are known as tooltips.
Should you put links in tooltips?
Avoid using any links or other actionable elements. Use HTML to add extra semantics like
<strong>. Simple text explanations should be included in tooltips. It is no longer a tooltip if you need any links, buttons, or more complex HTML inside of it.