Hover Card
Reveal contextual preview content when a reader hovers over or focuses a link.
Loading documentation…
Powered by heyo
HoverCard is a composable preview-card primitive for concise, contextual information. It consists of a root, an anchor-like trigger, and a floating content panel. The panel opens on hover and keyboard focus, so an inline documentation link can offer a useful preview without sending a reader away from the current page.
Use a hover card for a short definition, author profile, repository summary, or contextual preview that helps a reader decide whether to follow a link. It works particularly well inside prose because the trigger renders as an anchor and supports keyboard focus as well as pointer hover.
Keep content brief and supplementary. A hover card is not a replacement for a required instruction, a form control, or a multi-step interaction: important content must remain available in the document itself. For a persistent disclosure, use Accordion; for a link to a related page, use RelatedTopic.
HoverCardContent is rendered in a portal, positioned relative to its trigger, and uses a 4-pixel gap by default. The trigger opens immediately in Heyo Docs (delay={0}), which is useful for quick documentation previews. Increase delay when a dense page would otherwise open cards too eagerly.
Positioned preview
Rich content can turn an ordinary reference link into a helpful product preview. Keep the trigger useful on its own, then use the card for the detail that helps a reader decide whether to open it.
A HoverCard prop that opens the card initially in uncontrolled
mode. It defaults to false.
A controlled HoverCard state. Supply this together with
onOpenChange when another part of the page owns the open state.
Called whenever the root opens or closes. Use it to synchronise controlled state or record an interaction.
An anchor attribute accepted by HoverCardTrigger. Give the
trigger a real destination whenever possible so it remains a useful link
without the preview.
A HoverCardTrigger prop, in milliseconds, that delays opening.
Heyo Docs defaults it to 0.
A HoverCardTrigger prop, in milliseconds, that delays closing
after the pointer or focus leaves. The underlying primitive defaults to
300.
A HoverCardContent prop that chooses the preferred side of the
trigger. It defaults to bottom and may flip when the viewport
does not have enough room.
A HoverCardContent prop that aligns the panel along the
selected side. It defaults to center.
A HoverCardContent prop for the gap from the trigger. It
defaults to 4 pixels.
A HoverCardContent prop for fine-tuning alignment along the
trigger. It defaults to 4 pixels.
Extra classes accepted by the trigger and content components. Use it to style an inline trigger or change the panel's width and padding.