Popover vs. Tooltip
A tooltip gives a short hint. A popover can hold more text, choices, or buttons.
Use a tooltip when a few words are enough. Use a popover when a person must read or do more without leaving the page.
See what each pattern does
Try each example. Then read about the job it is made to do.
Popover
A popover is a small panel attached to the control that opened it. It can hold structured content and actions without blocking the page.
popover attribute / PopoverSelect an avatar to open a small profile. It shows the person's role, contact details, and a Follow action.
- Use it when
- Use it when the content belongs beside its trigger and people can keep using the page.
- Do not use it when
- Never use it for a short label-only hint. Use a tooltip instead.
- Name used in code
popover attribute / Popover
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"
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Popover | Use it when the content belongs beside its trigger and people can keep using the page. | Never use it for a short label-only hint. Use a tooltip instead. | popover attribute / Popover |
| 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" |
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 Popover, Tooltip for our real user flow. Use this rule: A tooltip gives a short hint. A popover can hold more text, choices, or buttons. 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.