Use a tooltip for short noninteractive supplemental descriptions on focus or hover, a popover for small anchored controls or richer context, an inline message for persistent important guidance, and labelled controls instead of relying on mystery icons.
Use a tooltip for short noninteractive supplemental descriptions on focus or hover, a popover for small anchored controls or richer context, an inline message for persistent important guidance, and labelled controls instead of relying on mystery icons.
Practice the judgment: Imagine this situation: Required password rules are hidden in a tooltip, so users lose the instructions while typing. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Tooltip | Popover | Inline message | Icon-only ambiguous action |
|---|---|---|---|---|
| UI or UX | UI + UX - Short noninteractive description tied to a trigger | UI + UX - Small anchored contextual overlay | UI + UX - Contextual in-flow feedback | UI + UX - Ambiguous action anti-pattern |
| UI guidance | Render a tooltip as a small text-only bubble visually tied to a focusable trigger, with concise copy, readable contrast, stable placement, and an optional arrow that points to the target. | Render a popover as a compact surface visually tied to the trigger, field, selection, or object that opened it, with a clear title or labelled content when the body is more than a short sentence. | Render the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. | Replace ambiguous symbol-only controls with visible text or icon-plus-text actions that name the verb and affected object. |
| UX guidance | Help the person reach a clear task outcome. | Make opening, light dismissal, Escape, outside click, anchor scrolling, focus order, and focus return predictable so the surface feels contextual rather than interruptive. | Use inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. | Make users confident about what will happen before activation instead of forcing recognition, memorization, or trial-and-error. |
| Good UI | A labelled Archive icon button receives focus and shows a short tooltip that says Moves this report to archived reports. | A Due date button in a task row opens a small popover beside the field with Today, Tomorrow, Friday, a custom date field, and a visible close control. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. | A report row shows Archive report, Download report, and Share report as labeled controls with matching accessible names. |
| Bad UI | The tooltip appears only on mouse hover. | Escape closes the layer but focus disappears or jumps to the top of the page. | A section message contains a full support workflow, several links, and unrelated settings controls. | The same box icon archives reports in one table and deletes folders in another. |
| Good UX | Tabbing to Archive keeps focus on the button, shows a short description, Escape hides it, and focus remains on Archive. | Opening the due-date popover moves focus to the first date option, choosing Tomorrow updates the field, closes the layer, and returns focus to the Due date trigger. | A successful send message remains beside the invoice long enough to copy the generated reference. | Users can identify the action before activation and receive confirmation, undo, or result status after consequential actions. |
| Bad UX | A user presses Escape to hide the tooltip and focus jumps to the top of the page. | The user scrolls and the popover stays in the old position, so it appears to describe the wrong field. | The message disappears like a toast even though users still need the invoice reference. | Hover-only tooltip is the only explanation for a destructive action. |
| Best fit | A compact control needs a brief supplemental explanation. | A local control needs brief explanatory content or light editing while page context remains visible. | A visible object or section has local status, warning, success, or next-step information. | Use this anti-pattern entry to audit toolbars, row actions, cards, command bars, mobile action sheets, and generated UIs with symbol-only controls. |
| Avoid when | The text is the only label or action name. | The content is essential instruction that must remain visible for task completion. | The message is a one-field validation correction. | The icon is paired with visible text that names the action. |
| Required state | Keyboard focus state where the tooltip appears and focus remains on the trigger. | Closed trigger state with visible label, icon name, or field relationship. | Informational inline message attached to the relevant object or section. | Default state where the action name is visible or programmatically exposed before activation. |
| Accessibility burden | Use tooltip text as a description with aria-describedby when it supplements the trigger. | Use a real button or equivalent control as the trigger whenever possible. | Keep the message in the reading order near the context it describes. | Every interactive icon control needs an accessible name that describes the action and, when useful, the affected object. |
| Common misuse | Using hover-only tooltip text as the only label for an icon button. | Using a popover as a hidden modal, drawer, sheet, command menu, or full workflow. | Using an inline message for a single field error that should be connected to that input. | Providing an accessible name such as icon, more, or button instead of the action and object. |