Designpedia
All terms
Overlays & Surfaces

Tooltip

also known as hint, info tip

A tooltip is a brief informative message shown when you hover over or focus an element, describing what it does. It should contain only short, non-interactive text, never buttons or links. Users should never have to hunt for a tooltip to complete a task; it only supplements what's already visible.

See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A tooltip is hover-triggered, brief, and non-interactive. A popover is click-triggered and can hold interactive content. If your 'tooltip' has buttons or links, it's really a popover or dialog. A toast appears on its own as feedback, not tied to hovering an element.
In the wild
Hovering the 'B' bold button in Gmail's editor shows a tooltip reading 'Bold (Ctrl+B)'.
Tags
Sources