Behavior comparison
Popover vs Tooltip
Decisive difference
Popover opens on an explicit press and may hold links or controls; Tooltip appears on hover or focus and holds only brief, non-interactive text.
Choice criteria, links and sources
- PopoverChoose Popover if the content includes a link, a control, or more than a sentence or two.Open entry Popover
- TooltipChoose Tooltip if a few words clarify an unfamiliar icon and losing them on mobile is acceptable.Open entry Tooltip
See the nine dimensionsSee the sources
Small contextual surfaces
Try it
Do you need a short explanation, interactive contextual content, or an action list?
Popover
Shared trial context
A project workspace must reveal brief help, supporting details, or a short action list from a compact control without leaving the current task.
Popover
Mission
Popover
Open the explanation, follow its internal focus order, then close it without losing your place.
Invoice detail
One service line and its related fees.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The nonmodal panel opens beside the billing label and its link can be focused.
- Edge case
- When space is tight, collision handling repositions the panel without covering the trigger or moving focus unexpectedly.
Tooltip
Mission
Tooltip
Reveal the icon's name with pointer and keyboard, then dismiss it with Escape.
Export report
report-july.pdf
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The hint appears beside the focused export button and leaves the button operable.
- Edge case
- On touch, the icon still has a visible accessible label path and no information depends only on hover.
What this example shows
Unlike Tooltip, a Popover can contain interactive content; unlike Dropdown menu, it is not limited to a list of actions.
Which fits your need?
Popover
Showing a compact explanation with a link
Tooltip
Explaining an unfamiliar icon
Difference and sources
Unlike Tooltip, a Popover can contain interactive content; unlike Dropdown menu, it is not limited to a list of actions.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Trigger
The control that opens or reveals the surface.
Decision
Family question
Do you need a short explanation, interactive contextual content, or an action list?
Three criteria to choose
- Trigger
Popover
An explicit press or click on a named trigger.
Tooltip
Pointer hover or keyboard focus on the reference element.
- Interactivity
Popover
May contain links or controls; focus moves only when the interaction requires it.
Tooltip
Contains no interactive controls; focus remains on the reference.
- Focus
Popover
Focus either remains on the trigger for simple content or moves predictably to the first meaningful control.
Tooltip
Focus remains on the trigger; the tooltip itself never enters the tab order.
Nine dimensions
- Trigger
Popover
An explicit press or click on a named trigger.
Tooltip
Pointer hover or keyboard focus on the reference element.
- Modality
Popover
Usually non-modal; surrounding page content remains operable.
Tooltip
Non-modal supporting description; the page remains active.
- Placement
Popover
Anchored near the trigger with collision-aware positioning.
Tooltip
Anchored beside its reference and repositioned to remain visible.
- Interactivity
Popover
May contain links or controls; focus moves only when the interaction requires it.
Tooltip
Contains no interactive controls; focus remains on the reference.
- Focus
Popover
Focus either remains on the trigger for simple content or moves predictably to the first meaningful control.
Tooltip
Focus remains on the trigger; the tooltip itself never enters the tab order.
- Dismissal
Popover
Escape, the explicit close control, or a safe outside press closes it and restores focus to the trigger.
Tooltip
It closes on Escape and after both focus and pointer leave the trigger and surface.
- Accessible role
Popover
dialog
Tooltip
tooltip
- Use case
Popover
Showing a compact explanation with a link
Tooltip
Explaining an unfamiliar icon
- Mobile behavior
Popover
Keep the trigger easy to tap and use a larger sheet when the content becomes complex.
Tooltip
Never rely on hover alone; expose essential help persistently or through an explicit tap pattern.
| Dimension | PopoverPopover | TooltipTooltip |
|---|---|---|
| Trigger | An explicit press or click on a named trigger. | Pointer hover or keyboard focus on the reference element. |
| Modality | Usually non-modal; surrounding page content remains operable. | Non-modal supporting description; the page remains active. |
| Placement | Anchored near the trigger with collision-aware positioning. | Anchored beside its reference and repositioned to remain visible. |
| Interactivity | May contain links or controls; focus moves only when the interaction requires it. | Contains no interactive controls; focus remains on the reference. |
| Focus | Focus either remains on the trigger for simple content or moves predictably to the first meaningful control. | Focus remains on the trigger; the tooltip itself never enters the tab order. |
| Dismissal | Escape, the explicit close control, or a safe outside press closes it and restores focus to the trigger. | It closes on Escape and after both focus and pointer leave the trigger and surface. |
| Accessible role | dialog | tooltip |
| Use case | Showing a compact explanation with a link | Explaining an unfamiliar icon |
| Mobile behavior | Keep the trigger easy to tap and use a larger sheet when the content becomes complex. | Never rely on hover alone; expose essential help persistently or through an explicit tap pattern. |