Designed by @jane
Jane Appleseed
@jane
Design systems engineer. Making interfaces easier to name and build.
Hover or focus the username
Hover Card
/ HoverCard · :hover /
also called hover preview, profile preview, preview card
A hover card is a rich preview associated with a person, place, or linked object. It reveals more information than a tooltip and may include passive metadata or a small number of actions, while leaving the underlying page usable. Its open and close delays must allow the pointer to move from the trigger into the card without flicker.
Anatomy — every part, named
- 1Preview trigger
HoverCardTrigger“The username that reveals a card when I hover it” is the preview trigger.
- 2Preview content
HoverCardContent“The richer little profile popup” is the preview content.
Prompt — paste into your agent
Add a hover card using Radix HoverCard to preview the linked profile with an avatar and summary. Reveal it from both hover and keyboard focus after a short delay, keep it open while the pointer crosses into the card, and reverse the opacity and transform transitions smoothly on exit.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Radix | HoverCard | |
| CSS | :hover | |
| HTML | popover | |
| CSS | :focus-visible |