Hover card
A preview panel that appears when the user hovers over a link or reference, showing richer content than a tooltip.
Mentioned in
last week.
Alex Mercer
@alex
Product designer. Writes about systems and craft.
412 following 8.2k followers
Where a tooltip is text-only and brief, a hover card can hold an image, formatted text, and even small actions. GitHub's user previews on @-mentions are the canonical example. The interaction needs a small open delay (to avoid flashing on accidental hovers) and a close delay (so the card doesn't vanish if the cursor briefly leaves and returns).
Also called
preview cardrich tooltip
When to use
- Previewing the target of a link without forcing the user to click
- User mentions, document references, or product cards that benefit from a glance
- Desktop interfaces where hover is a reliable signal
When not to use
- Touch-only interfaces — hover doesn't exist there
- Content that needs more than a glance (use a popover or modal)
Related
Source
UI vernacular; widely used in modern web apps. Radix UI and similar libraries codify the pattern as 'hover card'.