HoverCard
A preview of what a link points to, shown when people hover or focus it. Use it for profiles and page previews, and keep everything it shows on the page the link opens.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the client.
import { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardArrow } from "@camaleo/react";Anatomy
The trigger is a link (hover-card-trigger, an <a>). The card renders in a portal, wrapped in a scope that keeps the skin, mode and brand of the page around the link.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above. Hover a link, or Tab to it: the card opens on focus too.
Which one? A Tooltip names a control in a few words. A HoverCard previews where a link goes, as a bonus for mouse and keyboard users. A Toggletip explains a term on click, so it is the one that works on touch and that screen readers read.
Approved by @marina.costa
Author of an article
Readers check who wrote it without leaving the page. Clicking the name still opens the profile, which is the only way in on a phone.
Before you send, check the Pix fees for business accounts.
Link preview
Show the title and a one-line summary of the page, so people know if it's worth the click. The link text already says where it goes.
Questions about your contract go to Joana Ribeiro, your account manager.
Only a bonus
Screen readers don't read the card and touch screens never open it. Put the key fact in the link text ("your account manager"), not only in the card.
Longer delay in a list
In a list of names, delay={1000} keeps cards from flashing while the pointer only crosses the list. The default is 600 ms to open and 300 ms to close.
Load when it opens
Hover it. Fetch the details in onOpenChange, not for every link on the page, and show a Skeleton with aria-busy while they load.
Alignment
align lines the card up with the start, center or end of the link. side picks the side it opens on; it flips when there is no room.
Your last purchase was order #48213.
With an arrow
Add HoverCardArrow when several links sit close together, so it's clear which one the card belongs to.
In context
Hover cards add a quick look to links people already have. These are whole pieces of UI you can copy, in the skin you picked.
Comments (2)
- Marina Costa · 10/27/2026
The new receipt layout reads well on phones. Can we keep the amount on the first line?
- Rafael Lima · 10/28/2026
Done in the latest build, and the PDF matches it now.
| Task | Owner | Status |
|---|---|---|
| Biometric login on Android | Ana Souza | In review |
| Chargeback report | Bruno Alves | Done |
| New ID upload step | Carla Mendes | Blocked |
Sending a Pix at night
Between 8 pm and 6 am, transfers follow your night-time limits unless the person is one of your trusted contacts.
Guidelines
The profile page has everything the card shows, so a click, a tap or Enter gets people there.
Without href it can't be focused or tapped, so keyboard and phone users never see the card.
Three or four facts people can take in at a glance, then move on.
It closes when the pointer slips away, and keyboard users can't reach it. Put actions on the profile page, or use a popover.
Props
HoverCardTrigger takes delay (ms before it opens, default 600), closeDelay (ms before it closes, default 300) and render to use a Link. HoverCard takes open, onOpenChange and defaultOpen.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the card itself.
Attributes
Tokens it reads
Color
Shape & size
This component only
Accessibility
- Screen readers don't hear the card: the popup has no role and nothing links it to the trigger. The link text and the page it opens must carry everything.
- Touch screens have no hover: a tap follows the link and the card never opens.
- The card is never in the tab order, so keyboard users can't reach anything inside it. Never put links or buttons in it.
- The pointer can move from the link onto the card without closing it, as WCAG 1.4.13 asks.