Fig. 25 / Tooltip · In motion
Web UI Patterns
Tooltip
EXPLAINED SIMPLY:A tooltip is the tiny label that appears when you rest your cursor on something, tells you what it is, and disappears the moment you move away.
A tooltip is the tiny label that appears when you rest your cursor on something, tells you what it is, and disappears the moment you move away.
In the picture, the cursor is resting on an icon button and a small dark bubble above it says Download. The little arrow connecting the bubble to its owner is the pointer (some people say caret). A tooltip is deliberately the smallest thing in the interface.
Its natural job is naming mystery icons, and toolbars full of icon-only buttons depend on it. Still, a tooltip is a good backup label and a terrible only label, because plenty of people will never hover long enough to find it.
Two boundaries keep the word honest. If you can click things inside the floating box, that's a popover, not a tooltip. If it blocks the page until you deal with it, that's a modal. A tooltip is read-only: a few words, then gone.
Tooltips barely exist on phones, because there is no such thing as a hovering finger. Anything that lives only in a tooltip is invisible to every touchscreen user, which makes it an accessibility problem too.
You'll also hear "hover tip," "hint," and "info bubble." When an icon needs a name that appears on hover, ask for a tooltip. When the information actually matters, put it on the screen.