Tooltip

A tooltip is a small UI element that presents contextual information about another element in the user interface. It commonly reveals a label, hint, or short instruction to help users understand controls, icons, or abbreviations without cluttering the screen. Tooltips are designed to appear briefly and disappear when they are no longer needed.

Tooltips typically appear when a user hovers a pointing device over an element or moves keyboard focus onto it. Some implementations also show on touch devices after a long press or tap. A tooltip should not obstruct essential content and should dismiss after a short delay or when the user moves away.

Content should be concise, usually one or two short lines. It should describe the element’s purpose or offer guidance without duplicating visible labels. Placement should avoid covering critical content and should adapt to screen space. If several tooltips are present, the design should prevent overlap and visual confusion.

Native browser support uses the title attribute as a simple baseline, but it offers limited styling and inconsistent behavior across browsers. Custom tooltips can be built with CSS and JavaScript to control appearance, placement, and timing. For accessibility, associate the tooltip with its target using aria-describedby and ensure the content is accessible to screen readers and keyboard users.

Because hover is not available on touch devices, tooltips should not carry essential information or replace visible labels. Provide alternative explanations, keep tooltips brief, and allow users to dismiss them. Consider localization and performance, and test across devices to ensure legibility and usability.