Tooltip

Definition

A tooltip is a very short label that pops up next to an element when you hover over it with the mouse or focus it with the keyboard. It's especially handy for elements whose meaning isn't obvious at a glance, like icon buttons that show a picture but no text label. Attach a tooltip reading "Settings" to a gear icon, for example, and users no longer have to guess what the picture means. You can place a tooltip above, below, to the left, or to the right of the element that triggers it, and it usually positions itself automatically so it doesn't run off the edge of the screen. Tooltips are small, and they show only for as long as the user stays on the element, so they barely disturb the flow of the page.

Why does it matter?

A tooltip is a quiet helper: it hands information only to the people who want it, without cluttering the screen. If you put a text label next to every icon, the interface fills up fast, but a tooltip stays hidden until the user is curious, then appears just for that moment, saving space. That lets a toolbar or a cramped screen stay clean while still making each button's meaning clear. The important thing to remember, though, is that a tooltip is always a "nice to have" extra. If you design so that users can only figure out their next move by reading the tooltip, they'll be lost the moment it doesn't show up. That's an even bigger problem for people who don't use a mouse, or who navigate by listening to the screen. So use tooltips with the mindset that they're a bonus that aids understanding, not a vault where you hide essential information. Follow that one rule and a tooltip becomes a reliable ally that keeps your interface light.

Common mistakes

• Forgetting that touch devices have no mouse hover. Phone users have no way to hover over an element, so they never see the tooltip at all. If you put important information only in a tooltip, that information disappears entirely for them.
• Stuffing paragraph-length text or interactive elements like buttons and links inside a tooltip. A tooltip is a spot for a one-line label, so if the content is long or needs a click, it belongs in a popover or in inline help instead.
• Making the tooltip appear the instant the mouse arrives and vanish the moment it drifts away. With no delay, the tooltip flickers whenever the cursor merely passes over the element, which is more distracting than helpful.

Practical tips

• Never rely on a tooltip alone for important information. Keep the tooltip content to a single short line, and when it starts to grow, move it to a popover or to help text that's always visible on screen.
• Make the tooltip appear on keyboard focus, not just mouse hover. Keyboard-only users and screen reader users then get the same explanation, which improves accessibility a great deal.
• Add a very short delay before it appears, so it shows up only when the cursor lingers, not when it briefly grazes the element. That one small pause makes the whole screen feel much calmer.

Related concepts