A tooltip is a small text label that appears next to something on screen when you point at it with the mouse or move to it with the keyboard. It answers "what does this do?" for an icon or control, then disappears when you move away.
How a tooltip appears
The simplest version is the HTML title attribute: add title="Download invoice" to an element and the browser shows that text after the pointer rests on it for a moment. It is easy but limited. It cannot be styled, it is slow to appear, it does not show on touch screens, and keyboard users never see it.
Custom tooltips are small hidden elements that a script or CSS reveals on hover and on keyboard focus, positioned above or beside the trigger. To be read by screen readers, the trigger points at the tooltip text with aria-describedby, and the tooltip itself gets role="tooltip". The WCAG 2.1 success criterion on content on hover or focus also requires that the tooltip can be dismissed with Escape, stays visible while the pointer moves onto it, and does not vanish on a timer.
Example: icons in an admin screen
A salon's booking dashboard has a row of icon buttons next to each appointment: a pencil, a clock, a bin. Hovering the clock shows "Reschedule" and hovering the bin shows "Cancel appointment". Staff learn the icons in a day, and the tooltip stops anyone deleting a booking when they meant to move it.
When a tooltip is the wrong tool
Tooltips work for short hints on desktop. On phones there is no hover, so anything essential hidden in a tooltip is effectively invisible to mobile visitors. If customers need a piece of information to complete a form or decide to buy, such as what "CVC" means or why you ask for a phone number, put it in visible helper text under the field. Good microcopy often removes the need for a tooltip entirely. For a typical small-business brochure site you may not need tooltips at all.
Tooltip mistakes
- Using them for essential instructions. If people must read it to succeed, it should be on the page.
- Repeating the visible label. A button that says "Save" does not need a tooltip saying "Save".
- Mouse-only triggers. If the tooltip only appears on hover, keyboard users miss it.
- Putting links or buttons inside. Interactive content in something that closes when the pointer moves is hard to use. That is a popover, not a tooltip.
- Confusing it with alt text. Image alt text describes an image for screen readers; it is not meant to appear on hover.
Related terms
- Microcopy: visible hint text that often replaces tooltips.
- ARIA: links a tooltip to its trigger for assistive tech.
- Alt text: a different, image-specific description.
- UX writing: the craft of short interface text.