Tooltip definition
A tooltip is a small text label that appears when you hover over or keyboard-focus an element, such as an icon button, to say what it is or does. It disappears when the pointer or focus moves away. Tooltips hold short, optional text and shouldn't contain links or buttons.
A tooltip is the little label that pops up when you rest the mouse on an icon in a toolbar. It names the control or adds a short hint, and it goes away when you move on. The name comes from those toolbars in desktop software.
On websites a tooltip usually labels an icon-only button, spells out an abbreviation or adds a one-line hint next to a form field. If people need the text to finish a task, put it on the page. Touchscreens have no hover, so a tooltip that only opens on hover never appears on a phone at all.
What's the difference between a tooltip and a popover?
A tooltip is text only and opens on hover or keyboard focus. A popover, sometimes called a toggletip, opens on click and can hold links, buttons or longer content. Once you need anything interactive inside, you need a popover, and the HTML popover attribute now handles showing, hiding and stacking it without your own JavaScript.
The HTML title attribute shows a native tooltip in desktop browsers. It doesn't appear on keyboard focus or touch, you can't style it, and it is no replacement for a visible or accessible label.
How do you make a tooltip accessible?
- Show it on keyboard focus as well as hover. A tooltip that only reacts to the mouse doesn't exist for keyboard users.
- Connect it to its trigger. Give the tooltip element role=tooltip and an id, and point the trigger's aria-describedby at that id so screen readers read the text out. If the tooltip is the only name an icon button has, reference it with aria-labelledby instead.
- Let the Escape key close it without moving focus.
- Keep it open while the pointer moves from the trigger onto the tooltip itself.
The last two come from WCAG 2.1 success criterion 1.4.13, Content on Hover or Focus, at level AA. Content that appears on hover or focus has to be dismissible without moving the pointer or focus, hoverable without disappearing, and persistent until the user dismisses it, moves away or the information stops being valid. Many hand-rolled tooltips fail the hoverable part because they close the moment the pointer leaves the trigger.
How should a tooltip behave?
Add a short delay before it opens so tooltips don't flash up every time the pointer crosses a toolbar. Place it next to the trigger, usually above, and flip it to the other side when it would hit the edge of the viewport. CSS anchor positioning can do the placement natively in browsers that support it, and Floating UI is the usual JavaScript fallback.
Keep the text to a few words. A tooltip that needs a second sentence is usually a sign the interface itself needs a visible label.
Related terms
- Web accessibilityWeb accessibility means building websites that people with disabilities can perceive and operate, whether they listen to the page through a screen reader or navigate it by keyboard alone. It is measured against the WCAG guidelines, usually at level AA.
- Alt textAlt text is a short written description of an image, stored in the alt attribute of an HTML img element. Screen readers read it aloud and browsers show it when the image fails to load. Good alt text says what the image means in that spot on the page.
- KeyframeA keyframe is a point in an animation where you define exactly how something looks, such as its position, scale or opacity. The software or browser calculates the frames in between. In CSS, the @keyframes rule lists those points for an animation.