| 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. | Use tooltips to add a brief description on focus or hover without asking users to open a separate layer or change task mode. | Use a popover when users need local context, clarification, or a small edit without losing their place in the page. | 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. | A mystery icon has no label and the only explanation is a hover-only tooltip that never appears for touch users. | A large floating panel appears in the middle of the screen with no arrow, no title, no trigger relationship, and hidden controls below the fold. | A form hides the only eligibility rule under More details with no hint that it affects the answer. |
| Good UX | A user focuses @Maya Chen, reads the profile preview, moves the pointer into the card without it closing, presses Escape, and focus remains on the mention. | 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. | Resting trigger state with a visible or accessible name that works without the tooltip. | Closed trigger state with visible label, icon name, or field relationship. | Closed state with a specific summary label and hidden supporting content. |
| Accessibility burden | Do not rely on hover card content as the only source of required information. | 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. |