Hover Card
A hover card is a rich preview. It opens when a reference is hovered or focused, without blocking the page.
HoverCardA real example
Hover over an author's name to see a short bio and follower count. The full profile stays closed.
Main parts
- 01Trigger
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Use it when
Use it for optional preview details that help people choose where to go next.
Do not use it when
Never hide required information behind hover because touch devices may not open it reliably.
Name used in code
HoverCard Before you ship
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome: Use Hover Card to solve this user need without losing the current context. User context: Hover over an author's name to see a short bio and follower count. The full profile stays closed. Recommended pattern: Hover Card. Why it fits: Use it for optional preview details that help people choose where to go next. Do not use it when: Never hide required information behind hover because touch devices may not open it reliably. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): This is not a normative standard. Its name, limits, and expected behavior can change from one source to another. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Check this request
Review the current use of Hover Card. Definition: A hover card is a rich preview. It opens when a reference is hovered or focused, without blocking the page. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.