Tooltip

A tooltip is a small text label that appears on hover or focus to explain an interface element. When a user rests the pointer over a button, an icon, or a field, or moves keyboard focus to it, a brief pop-up appears nearby with a short piece of explanatory text: the name of a toolbar icon, a clarification of what a control does, or a hint about the expected input. Tooltips are meant to be lightweight and supplementary. They provide help exactly where and when it is needed without permanently cluttering the interface with extra labels.

A tooltip works by tying a small overlay to a triggering element and revealing it in response to hover or focus. When the trigger is activated, the tooltip appears adjacent to it, usually after a brief delay so it does not flicker during casual pointer movement, and it disappears when the pointer leaves or focus moves away. Good tooltips are positioned intelligently so they do not run off the edge of the screen and do not cover the very element they describe. Accessibility matters here too: a tooltip should be reachable by keyboard focus rather than hover alone, should be associated with its control so screen readers can announce it, and should never be the only place critical information lives, because hover is unavailable on touch devices and focus behavior varies.

The name combines "tool" with "tip," in the sense of a helpful hint. The small hover label rose to prominence in the graphical software of the 1990s, where dense toolbars full of small, cryptic icons needed a way to tell users what each button did without labeling every one permanently. Resting the cursor on an icon produced a little tip identifying the tool, hence the term, and the pattern carried directly onto the web.

For a business, a tooltip matters because it lets an interface stay clean while still being learnable. It offers just-in-time help that reduces confusion and support inquiries, clarifying an unlabeled icon, defining a piece of jargon in a form, or explaining why a field is required, all without forcing that text onto the screen for everyone at all times. On complex products and data-heavy dashboards, well-placed tooltips can meaningfully lower the learning curve and keep users moving through a task rather than stopping to hunt for documentation.

The most common mistake is hiding essential information inside a tooltip. Because tooltips are only revealed on hover or focus and do not work reliably on touchscreens, anything a user genuinely needs to complete a task should be visible or otherwise accessible, not buried behind a hover. Overusing tooltips is another pitfall, peppering an interface with hints until they become noise or appear so eagerly that they get in the way. Writing tooltips that are too long turns a quick hint into a paragraph nobody reads. Poor accessibility, where the tip is unavailable to keyboard and screen-reader users, is a frequent and serious failing. A tooltip relates to adjacent concepts: it is a far gentler companion to a modal, which interrupts rather than hints, it frequently explains the meaning of iconography where symbols alone are ambiguous, and it is one of the small touches that together shape the overall user experience.