Tooltip
A small label appearing on hover or focus that explains a control without taking permanent space in the interface.
UI ComponentsA tooltip holds a short piece of explanatory text for a control whose purpose is not obvious — most often an icon-only button. It must be supplementary. Anything a person needs in order to complete a task cannot live in a tooltip, because tooltips do not exist on touch devices, are easy to miss, and vanish the moment the pointer moves.
Two rules cover nearly all tooltip defects. Never put interactive content in one; if it needs a click, it is a popover. And make it reachable by keyboard focus, not hover alone, or every keyboard user gets an icon with no label. A short open delay stops tooltips firing as the pointer crosses a toolbar.
The icon-only trap
Tooltips are routinely used to justify removing labels from icons. Users cannot hover on a phone and will not hover to find out what a toolbar does. If an icon needs a tooltip to be understood, consider whether it needs a visible label instead.
In practice
A trading interface used icon-only buttons for order types with tooltips explaining each. On tablet, where roughly 30% of sessions happened, the tooltips never fired. Support saw repeated wrong-order-type complaints. Adding short visible labels removed the complaints and cost one row of toolbar height.
Where teams get it wrong
- Essential information available only on hover.
- Interactive content inside a tooltip.
- Tooltips that do not appear on keyboard focus.
- No open delay, so they flash across a toolbar as the pointer passes.
- Icon-only interfaces defended by tooltips that touch users never see.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a tooltip and a popover?
A tooltip appears on hover or focus, holds only short text, and contains nothing clickable. A popover is opened by a click and can hold controls. Interactive content always belongs in a popover.
Do tooltips work on mobile?
Not reliably — there is no hover on touch. Anything a user needs to complete a task must be visible or reachable by tapping, not hidden behind a tooltip.
Related terms
All terms- PopoverA small overlay anchored to the control that opened it, holding content or actions without blocking the page.
- Button DesignDesigning the appearance, hierarchy, states and labels of buttons so people can tell what is clickable and which action matters most.
- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us