Link Preview
Hover card preview.
Usage
The hover-card pattern: peek at what is behind a link without following it. Content portals to <body> automatically, so z-index stacking stays clean.
Know the limits
This card opens on pointer hover only. It does not open on focus, so keyboard users never see it, and there is no hover on touch, so mobile users never see it either.
That makes it enrichment, never a delivery mechanism. Everything inside the card must be
reachable another way — put an action or a fact only in here and you have hidden it from a
large share of your users. The upside is that the trigger stays a real <a href>, so the destination itself is always reachable.
If the content is essential, use a Popover — it opens on click, which works for every input method.
The trigger reports as a button
Worth knowing before you ship it: Bits renders the trigger as an anchor with your href, but overrides its role to button with aria-haspopup="dialog". A screen
reader therefore announces "button", not "link", so the element does not advertise that it
navigates.
The practical consequence: do not rely on the trigger alone to communicate a destination. Make the link text say where it goes, or provide the same navigation somewhere that is announced as a link.
Props
Root, Trigger and Arrow are re-exported from Bits unchanged, so their props are forwarded
rather than redeclared.
LinkPreview.Root
| Prop | Type | Default |
|---|---|---|
open Bindable open state of the card. | boolean | false |
onOpenChange Called when the card opens or closes. | (open: boolean) => void | — |
openDelay Milliseconds of hover before the card opens. | number | 700 |
closeDelay Milliseconds after the pointer leaves before it closes. | number | 300 |
LinkPreview.Trigger — plus the native anchor attributes.
| Prop | Type | Default |
|---|---|---|
href Destination. Kept as a real anchor href so the link works without the card. | string | — |
class Extra classes merged onto the trigger. | string | — |
LinkPreview.Content — plus the Bits floating-position props (side, align, sideOffset).
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the floating card. | string | — |