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.
If you called it…
…you meant a hover card.
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.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my hover card (Radix HoverCard, mouseenter/mouseleave). Rule out: the card closing while the pointer travels from trigger to card — you need a hover-intent delay or safe-polygon; touch devices never opening it because there is no hover — provide a tap/focus path; open/close delays tuned so short it flickers on skim; the card trapped under another stacking context. The symptom:
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 |