Tooltip

A tooltip is a small label appearing on hover or focus that explains a control without spending layout space on it. Its most common and most defensible use is naming an icon-only button.

The rule that governs everything else about it: a tooltip is supplementary. Anything somebody needs in order to act must be visible on the screen. If the interface only works when a tooltip is read, the tooltip is carrying a load it cannot bear, because a large share of users will never see it.

Why it cannot carry essential information

No hover on touch. On a phone or tablet there is no hover state, so the tooltip either never appears or fires on tap and competes with the control's own action. Neither is a design.

Keyboard users may not reach it. Unless it is wired to focus as well as hover, and many implementations are not.

It is invisible until sought. Somebody scanning a toolbar sees eight glyphs. They do not hover over each one to learn the interface; they guess, or they avoid the ones they do not recognise.

That last point is the quiet cost in dense B2B products. A toolbar of icon-only controls is learned once by long-term users and relearned by trial by everyone else. See icon library.

Tooltip against popover

The failure is a tooltip somebody needs to click inside — to follow a link, copy a value, press a button. The moment that is true it is a popover, and building it as a tooltip means the content vanishes as the pointer travels toward it.

Timing decides whether they are pleasant

A delay before showing, roughly 300 to 500 milliseconds. Without it, crossing a toolbar fires a cascade of labels, which is visually noisy and slower than reading the icons.

No delay for neighbours once one is open. Having committed to reading labels, somebody should be able to move along the row instantly.

A short grace period before hiding, so the pointer can cross a small gap without the tooltip disappearing.

No delay at all on focus. A keyboard user has already committed by arriving.

Writing them

Name the action, not the icon. "Export as CSV", not "Download icon".

Short enough to read in a glance. One line. A tooltip that runs to three lines is content that belongs on the page.

No duplication of a visible label. A button reading "Save" with a tooltip reading "Save" is noise.

Include the keyboard shortcut where one exists. Tooltips are the cheapest place in the whole interface to teach shortcuts.

Where they go in B2B

Truncated values. A table cell showing "Acme Corporation Lt…" should offer the full string on hover, and also in the accessible name, because truncation is not only a visual problem. See data table.

Disabled controls. A disabled button explaining why it is disabled is one of the genuinely good uses — provided the tooltip fires on a disabled element, which it does not by default in most implementations.

Column headers. Where a column name is necessarily terse, the definition belongs here rather than in a help article.

In practice

A product's main toolbar is eight icon-only buttons with tooltips. Experienced users are fast; new users open a support ticket asking where the export is.

Watching them explains it. Nobody hovers over eight icons to find one. They scan, recognise two or three, and give up on the rest. The export control had been there for two years, behind a glyph that meant nothing until named.

The change is not a better tooltip. The two most-used actions get visible text labels, the rest keep tooltips, and the toolbar gains an overflow menu with named items for everything else.

The tooltips were correct throughout. They were simply being asked to be the interface rather than to supplement it.

Where teams get it wrong

• Essential information in a tooltip. Invisible on touch, and unsought by most.
• Interactive content inside one. It vanishes on the way to being clicked.
• No focus trigger. Keyboard users get nothing.
• No delay. A cascade of labels across a toolbar.
• Repeating a visible label. Noise dressed as help.
• An icon-only control with no accessible name. The tooltip is not a substitute for one.