Use a hover card for a rich preview of a linked or referenced object on hover or focus, a tooltip for short noninteractive description, a popover for user-managed local content or light controls, and disclosure details for inline expandable explanation that stays in page flow.
Use a hover card for a rich preview of a linked or referenced object on hover or focus, a tooltip for short noninteractive description, a popover for user-managed local content or light controls, and disclosure details for inline expandable explanation that stays in page flow.
Practice the judgment: Imagine this situation: A hover card contains required eligibility rules that disappear before users can apply them. 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 | Hover card | Tooltip | Popover | Disclosure / details |
|---|---|---|---|---|
| UI or UX | UI + UX - Rich preview surface on hover or focus | UI + UX - Short noninteractive description tied to a trigger | UI + UX - Small anchored contextual overlay | UI + UX - Single in-place reveal for optional supporting content |
| UI guidance | Render a hover card as a compact preview visually tied to a link, mention, row, object chip, file, person, or chart mark, with a title, key metadata, optional thumbnail, recent activity, and a clear route to the full object. | 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 one clearly labelled disclosure control with a visible summary that predicts the revealed content, followed immediately by the hidden explanation, example, or supporting note. |
| UX guidance | Use hover cards to help users inspect an object before navigating, especially in dense lists, mentions, dashboards, file browsers, issue trackers, and relationship-heavy interfaces. | 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 disclosure details when a short explanation, example, eligibility note, or calculation help is useful to some users but would slow most users if always visible. |
| Good UI | Hovering or focusing @Maya Chen opens a card with avatar, role, local time, current project, recent activity, and View profile link. | 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. | A tax form shows a summary labelled How we calculate household income, revealing a short worked example below the income field. |
| Bad UI | A hover card contains a long editable form, delete buttons, filters, and settings controls. | The tooltip appears only on mouse hover. | Escape closes the layer but focus disappears or jumps to the top of the page. | A page uses ten Details controls as section navigation, with some triggers revealing text and others opening pages. |
| Good UX | The person reaches the intended result with clear feedback. | 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 user opens the calculation help, reads one example, closes it, and the nearby income field value remains unchanged. |
| Bad UX | The card disappears while the pointer travels from the mention into the preview. | 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. | Users miss a deadline because the deadline is hidden inside a collapsed disclosure with a vague label. |
| Best fit | Users need to inspect object metadata before choosing whether to open a link, mention, file, row, issue, or reference. | A compact control needs a brief supplemental explanation. | A local control needs brief explanatory content or light editing while page context remains visible. | One short supporting explanation belongs in place beside the content it clarifies. |
| Avoid when | The content is only a short description that belongs in a tooltip. | The text is the only label or action name. | The content is essential instruction that must remain visible for task completion. | The content is required to make the right decision. |
| Required state | Resting trigger state with visible or accessible object identity. | Keyboard focus state where the tooltip appears and focus remains on the trigger. | Closed trigger state with visible label, icon name, or field relationship. | Closed state with a specific summary label and hidden supporting content. |
| Accessibility burden | Make the trigger keyboard focusable and expose a usable name for the referenced object. | 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. | Use native summary behavior or a button that exposes expanded and collapsed state. |
| Common misuse | Using a hover card as the only place for required instructions or validation help. | 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 vague summaries such as More, Details, or Click here. |