Tooltip vs. Hover Card
A tooltip gives a short label or hint. A hover card shows a richer preview of a person, item, or link.
Use a tooltip when a few words are enough. Use a hover card when a preview can save a trip to another page. It must also work by keyboard and touch.
See what each pattern does
Try each example. Then read about the job it is made to do.
Tooltip
A tooltip is a short note about a control. It opens when a mouse hovers or a keyboard focuses the control. People can't use it like a button.
role="tooltip"When an icon button gets keyboard focus, “Copy link” appears. Focus stays on the button.
- Use it when
- Use it to explain a short control label on both mouse hover and keyboard focus.
- Do not use it when
- Never put actions, must-read instructions, or long content inside a tooltip.
- Name used in code
role="tooltip"
Hover Card
A hover card is a rich preview. It opens when a reference is hovered or focused, without blocking the page.
HoverCardHover over an author's name to see a short bio and follower count. The full profile stays closed.
- 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
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Tooltip | Use it to explain a short control label on both mouse hover and keyboard focus. | Never put actions, must-read instructions, or long content inside a tooltip. | role="tooltip" |
| Hover Card | Use it for optional preview details that help people choose where to go next. | Never hide required information behind hover because touch devices may not open it reliably. | HoverCard |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Tooltip, Hover Card for our real user flow. Use this rule: A tooltip gives a short label or hint. A hover card shows a richer preview of a person, item, or link. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.