uioverlaydisclosurehoveraccessibility

Tooltip

A small label that appears next to an element when you hover over it or move keyboard focus onto it. Tooltips are most often used to explain icons, abbreviations, or anything whose meaning isn't obvious from looking at it.

Explanation

Tooltips earn their place when an element on the page is meaningful, but the meaning isn't readable just from looking at it. A trash-can icon is a good candidate — most people will guess 'delete', and a label confirms it. A button with no text is a strong candidate. A button with clear, visible text usually isn't — adding a tooltip that just repeats the visible label is noise, not signal.

Three decisions shape every tooltip. First, what makes it appear — a mouse hover, keyboard focus, or both. (Touch devices have no hover at all, which is why tooltips alone are often a poor fit on mobile; the same content usually wants a different pattern there, like a tap-triggered popover or an inline label.) Second, how quickly it appears — most tooltips wait a fraction of a second before showing, so they don't flicker as the cursor moves across a row of icons. Third, where it appears — above, below, or beside the element. Above is the most common default, but a well-built tooltip repositions itself if there isn't room there.

Tooltips are not for information the user needs to use the page. Error messages, required-field warnings, the primary instruction on a form — all of those have to be visible without anyone hovering. If a piece of information is essential, it doesn't belong in a tooltip.

For people using a screen reader or navigating by keyboard, the tooltip's text has to be programmatically linked to the element it describes — done in HTML with an attribute called aria-describedby. Showing the tooltip on keyboard focus, not only on mouse hover, is what lets a keyboard user reach the same information a mouse user would.

Examples

Mechanics

Explaining an icon-only button

Hover the button, or click it once and tab away — the label appears in both cases. This is the most common reason a tooltip exists: an icon whose meaning is plausible but not certain.

← hover or focus me

Different placements

The same tooltip shown in four positions relative to the element. Where it appears matters when the element sits near an edge — a tooltip pointing into the screen edge would get cut off.

Delay before appearing

The first tooltip shows immediately; the second waits 600ms. A short delay (150–300ms is typical) prevents flicker as the mouse moves across the page. Too long, and the tooltip feels broken.

Common use cases

Help icon next to a form label

A small "?" beside a field is the canonical place for "additional context that's nice to know but not required." The label and input stay clean; the help text only appears when the user asks for it.

Recovery email

Why a button is disabled

A disabled button leaves users wondering what they're supposed to do to enable it. A tooltip explains the precondition without cluttering the rest of the page. (The element is a focusable span here, because a true disabled <button> doesn't fire pointer events in some browsers.)

Checkout← cart is empty

Surfacing keyboard shortcuts

Power users want shortcuts; new users don't need them in their face. Putting the shortcut in a tooltip is a small but high-value pattern for surfacing the keyboard equivalent of a click — visible only to people who go looking.