Tooltips & Popovers

Tooltips and popovers are contextual overlays providing additional information or controls without navigation away from the current view.

stellae.design

Design Principles

Tooltips: small text overlays on hover/focus to explain elements. Popovers: richer overlays with interactive content on click/tap. Both reduce density by hiding supplementary info until needed. Key difference: tooltips are informational and non-interactive; popovers are interactive. Both must handle viewport positioning and accessibility.

Why It Matters

Tooltips and popovers serve as contextual information layers that reduce cognitive load by surfacing details exactly when and where users need them. When used well, they prevent interface clutter while keeping supplementary content accessible. Poor implementation, however, can obscure content, trap focus, or leave touch users without access to critical information.

Real-World Examples

Icon button with descriptive tooltip

A toolbar displays icon-only actions, each with a tooltip that appears on hover or keyboard focus showing the action name. The tooltip uses a short delay before appearing to avoid flashing during casual mouse movement. It disappears immediately when the user moves to another element, keeping the interface clean.

User profile popover on avatar click

Clicking a user avatar in a comment thread opens a popover with the person's name, role, and a link to their full profile. The popover is anchored to the avatar with an arrow indicator and dismisses on outside click or Escape. Focus is moved into the popover and returned to the avatar on close.

Counter-example

Tooltip containing a required form instruction

A form field's only validation guidance lives inside a tooltip that appears on hover over a small question-mark icon. Mobile users cannot trigger the hover state and miss the instruction entirely, leading to repeated form errors. Critical guidance like this should be displayed inline, not hidden behind a hover interaction.

Role-Specific Guidance

Common Mistakes

• Overloading tooltips with paragraphs of text defeats their purpose as lightweight hints — if the content needs more than a sentence, use a popover or inline help instead. Another mistake is failing to provide a non-hover trigger, which locks out keyboard and touch users. Developers also frequently neglect collision detection, allowing tooltips to clip against viewport edges.