Components
Hover Card
A popup that displays rich content when users hover over or focus on a trigger element, providing additional context without navigation.
Hover cards provide contextual information on demand, allowing users to preview content or get additional details without leaving their current context or navigating away from the page.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for previewing content, showing user profiles, displaying additional context, or providing supplementary information on hover. |
| Content | Keep content concise and relevant. Include key information that helps users make decisions without overwhelming them. |
| Behavior | Display on hover with a slight delay. Support keyboard navigation and ensure content is accessible via focus states. |
| States | Provide smooth enter/exit animations. Ensure the card stays visible when users move cursor into the content area. |
| Feedback | Use subtle animations and appropriate positioning to avoid blocking important content on the page. |
| Examples | User profile previews, link previews, help tooltips, image details, or any content that benefits from contextual preview. |
Best Practices
- Progressive Disclosure: Show just enough information to be helpful without overwhelming users.
- Appropriate Timing: Use reasonable delays before showing/hiding to prevent flickering on quick mouse movements.
- Smart Positioning: Position cards to avoid covering important content or going off-screen.
- Keyboard Accessible: Ensure hover cards can be accessed and dismissed using keyboard navigation.
- Mobile Consideration: Consider alternative patterns for touch devices where hover doesn’t exist.
Do’s and Don’ts
Do
- Use for supplementary information that enhances the experience.
- Keep content focused and relevant to the trigger element.
- Provide smooth transitions and appropriate delays.
- Ensure keyboard and screen reader accessibility.
Don't
- Use for critical information that users must see.
- Make hover cards too large or complex.
- Block important content with poorly positioned cards.
- Rely solely on hover for touch device users.
Additional Guidance
- Psychological Impact:
- Reduced Cognitive Load: Users can get context without breaking their mental flow.
- Confidence Building: Preview capabilities help users make informed decisions before clicking.
- Efficiency: Quick access to information reduces the need for navigation and back-button usage.