Short answer: A tooltip is a short message that appears when someone hovers over or focuses an element, such as an icon button. Use it only for extra help, never for information people need. Make it open on keyboard focus too, stay open while the pointer moves onto it, and close with Escape.
What a tooltip is
NN/g defines a tooltip as a brief, informative message that appears when someone interacts with an element. It opens with the mouse or with the keyboard, and it explains the element it belongs to.
MDN adds that it appears on its own after a short delay, usually one to five seconds, and closes when the pointer or the focus leaves. Nobody asks for it, so it should never hide what people need.
Tooltips and their neighbors
| Pattern | Opens with | Good for |
|---|---|---|
| Tooltip | Hover or keyboard focus | A short hint for an icon or a control |
| Popup tip | A tap or a click | Extra help that also works on touch screens |
| title attribute | A long mouse hover only | Nothing important: keyboard and touch users never see it |
| Non-modal dialog | A click | Extra content with links or buttons |
| Visible text | Always there | Anything people need to finish a task |
From NN/g, MDN and the W3C’s authoring practices for ARIA, read November 5, 2026.
NN/g notes that tooltips are not normally available on touchscreens, because they depend on hover. Popup tips, which open with a tap or a click, do the same job there.
Why the title attribute is not enough
Browsers show an element’s title attribute as a small tooltip after a long mouse hover. MDN points out that nobody can open it with the keyboard or by touch, which makes it inaccessible.
MDN lists who it fails: people on touch-only devices, keyboard users, screen reader and magnifier users, people with fine motor impairments and people with cognitive concerns.
The W3C leaves the browser’s own title tooltip out of its hover rules, because the browser controls it. That still doesn’t make it a good place for anything important. Our aria-describedby guide covers a better way to attach a description.
What WCAG 1.4.13 asks
Success criterion 1.4.13, level AA, covers custom tooltips, sub-menus and other popups that appear on hover or focus.
Dismissible: people can close the content without moving the pointer or the focus, for example with Escape. Hoverable: the pointer can move onto the content without it disappearing.
Persistent: the content stays visible until the pointer or focus leaves, the person dismisses it, or its information is no longer valid.
Screen magnifier users see only a small part of the page, the part that follows the pointer, the W3C explains. A large pointer can cover the very content it opened.
The first condition has two exceptions: error messages, and content that only covers empty space or decoration.
How to build an accessible tooltip
The W3C pattern puts role="tooltip" on the element that holds the text, and aria-describedby, with the tooltip’s id, on the element that triggers it. The focus stays on the trigger while the tooltip shows, and Escape closes it.
A tooltip never receives focus, so MDN warns it cannot contain links or buttons. For extra content people need to click, the W3C suggests a non-modal dialog, which our HTML dialog guide explains.
For a tip that opens with a click, the popover attribute helps. A button with popovertarget opens it without a script, and MDN explains that an auto popover closes when someone clicks outside it or presses Esc.
NN/g adds that a tooltip must work with the keyboard as well as the mouse. Our keyboard navigation guide shows how to test a page with Tab alone.
How to add a tooltip
- Ask first whether the text could stay visible instead.
- Keep it short and useful, and drop tooltips that repeat the label.
- Put role="tooltip" on the text and aria-describedby on the trigger.
- Show it on keyboard focus as well as on hover.
- Keep it open while the pointer moves onto it.
- Close it with Escape, without moving the pointer or the focus.
- Never put links, buttons or required steps inside it.
Our pages and tooltips
On November 5, 2026, we checked eight of our pages: the home page, our web design page, our pricing page and a guide, in both languages. None of them uses a tooltip. There is no tooltip role, no popover and no title attribute on anything a visitor can see.
That is how we build: what people need stays in visible text. On the pricing page, each of the six services shows its terms, like the setup fee or the minimum stay, as text under the price.
One thing on our pages does open on hover: the Services panel in the header. We tested it on the home page and a guide, in both languages, against the W3C’s three conditions.
The panel stayed open when the pointer moved onto it and after three seconds without moving. Escape closed it with the pointer still on the panel, and it closed when the pointer left.
Before you publish
- Nothing people need to finish a task sits in a tooltip.
- No tooltip repeats the label it belongs to.
- Every tooltip opens on keyboard focus too.
- Escape closes it without moving the pointer.
- The pointer can move onto it without it closing.
- No important text lives only in a title attribute.
RememberIf the information is important enough for a tooltip, it is important enough to be visible. Keep tooltips for extra help.
Our web design service keeps important information in visible text, like the pages above.
Quick answers about tooltips
What is a tooltip?
A short message that appears when someone hovers over or focuses an element, such as an icon button. NN/g defines it as a brief, informative message, and MDN adds that it shows after a short delay and closes when the pointer or focus leaves.
Can I use the title attribute as a tooltip?
Not for anything that matters. MDN explains that the browser shows the title only on a long mouse hover, so keyboard and touch users never see it. Write the information as visible text or build a real tooltip instead.
Do tooltips work on phones?
Usually not. NN/g notes that tooltips depend on hover and are not normally available on touchscreens. On a phone, a tip that opens with a tap and closes with another tap or Escape does the same job.
Can a tooltip contain a link or a button?
No. MDN says a tooltip never receives focus, so it cannot hold links, inputs or buttons. If the extra content needs something to click, the W3C suggests a non-modal dialog instead.
What does WCAG require for tooltips?
Success criterion 1.4.13, level AA, covers content that appears on hover or focus. People must be able to dismiss it without moving the pointer or focus, move the pointer over it, and read it until they choose to leave.
Sources
Read on November 5, 2026. W3C Web Accessibility Initiative: Understanding Success Criterion 1.4.13: Content on Hover or Focus and Tooltip Pattern. MDN Web Docs: ARIA: tooltip role, title and popover. Nielsen Norman Group: Tooltip Guidelines. Our case: our own pages, read in a browser on November 5, 2026.