tooltips

Tooltips are concise UI elements that provide contextual information about a user interface control or feature. They typically present a short text label or explanation that appears when the user hovers over the element with a cursor, focuses it with a keyboard, or activates it on touch devices. The aim is to help users learn the purpose, usage, or available actions without leaving the current context.

Content should be brief and actionable, usually one or two lines. Rich tooltips may include simple formatting, links, or icons, but should avoid obstructing the interface or duplicating information already visible in the control label. The tooltip is not a replacement for accessible labeling; it complements labels and instructions.

Implementation often relies on a tooltip widget or native browser features. On the web, the title attribute provides a basic tooltip, while custom tooltips allow richer content and precise positioning but require careful handling of focus, keyboard navigation, and screen reader accessibility. Use aria-describedby to associate the tooltip content with the control for assistive tech.

Best practices include keeping duration appropriate; ensuring tooltips appear near the element; choosing placements that avoid clipping; making them dismissible; avoiding triggering on noninteractive text; ensuring they are accessible on keyboard and screen readers; and avoiding overreliance on color cues.

Limitations include potential inaccessibility on touch devices, the possibility of disappearing too quickly, or being ignored by users who disable hover. Alternatives include inline help, persistent help panels, or contextual help systems. Tooltips have historical roots in the HTML title attribute, and modern interfaces often implement custom tooltips to support richer content and precise control.