Comparison file · contextual
Tooltip vs Popover vs Hover Card
Choose between supplementary text, a preview, and an interactive contextual surface.
Run the diagnosisFast decision
Start with the behavior that changes the build
Tooltip
If users must move into the surface or operate links, use a Popover instead.
Open field note ↗Popover
If the background must be blocked and focus contained, use a Modal Dialog.
Open field note ↗Hover Card
If the surface exists mainly to operate controls, use a Popover.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
| Decision | Tooltip | Popover | Hover Card |
|---|---|---|---|
| Trigger | Pointer hover and keyboard focus on the owning element. | Usually click or press; may also open programmatically. | Hover or focus on a link or object reference. |
| Interactive content | No interactive controls inside. | Interactive controls are allowed. | Primarily preview content; keep actions limited and verify the chosen implementation supports them. |
| Focus | Focus stays on the owning element; the tooltip itself does not receive focus. | May move into the surface when interaction requires it; must return predictably. | The trigger remains the primary focus anchor; preview content should not create a hidden keyboard trap. |
| Dismissal | Pointer leave, focus loss, or Escape while open. | Trigger toggle, outside interaction, Escape, or an explicit action. | Pointer and focus leave the trigger and preview, or Escape. |
| Persistence | Temporary supplementary information. | Stays open long enough to operate its content. | Temporary while the user explores the reference. |
Discriminating questions
Ask only what changes the result
- Does the revealed content contain controls or links users must operate?Yes / No
- Is the content a richer preview of the referenced person, place, or item?Yes / No
- Must the surface stay open after a click while the pointer moves into it?Yes / No
Implementation consequences
Turn the comparison into a build decision
The final choice must explain both the selected contract and the alternatives it excludes.
Name the task
Choose between supplementary text, a preview, and an interactive contextual surface. Write the user goal before choosing any component from a library.
Freeze the decisive dimensions
For this group, compare Trigger, Interactive content, Focus, Dismissal, Persistence. Do not allow visual similarity to replace those requirements.
State the exclusion
Record why the closest rejected pattern fails. That reason helps a coding agent avoid silently substituting a familiar but incompatible component.
Verify the behavior
Open the selected pattern reference, copy its acceptance checks, and test focus, keyboard, dismissal, placement, content, and mobile behavior in the real interface.
Frequently asked questions
Tooltip vs Popover vs Hover Card questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between Tooltip, Popover, Hover Card?
Choose between supplementary text, a preview, and an interactive contextual surface. The decisive dimensions on this page are Trigger, Interactive content, Focus, Dismissal, Persistence. Read each column as a behavior contract, not as a visual style recommendation.
How do I choose among Tooltip, Popover, Hover Card?
Begin with the required user task, then answer the discriminating questions above. Choose the pattern whose purpose and behavior match the evidence, and explicitly reject alternatives whose focus, input, modality, persistence, or structural contract would break the task.
Can two of these terms apply to the same interface?
Sometimes. This taxonomy includes semantic patterns, composite patterns, presentation forms, behavior variants, message channels, and generic behavior labels. A presentation term and a semantic contract can coexist, so specify each required property instead of forcing every term into a flat either-or choice.
How should I verify the final implementation?
Open the selected pattern reference and run its observable checks. At minimum, confirm the configured trigger, dismissal, focus, keyboard behavior, interactive content, placement, and mobile adaptation. Also verify the linked official or first-party source against the library you ship.