Hover Card

A preview that opens when a link is hovered or focused — who a mention is, what a reference points to. Supplementary only: nothing in it should be required reading.

tsx

1import { HoverCard, HoverCardTrigger, HoverCardContent } from "@pestoui/core"

Mention preview

The trigger stays a real link or button, so the card is reachable by keyboard focus as well as by pointer.

Props

Prop	Type	Default	Description
openDelay / closeDelay	number	700 / 300	On HoverCard. Milliseconds before the card opens and before it closes.
align	"start" \| "center" \| "end"	"center"	On HoverCardContent. Alignment against the trigger.
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	On HoverCardContent. Preferred side; it flips when there is no room.
sideOffset	number	4	On HoverCardContent. Gap between the trigger and the card, in px.

PreviousHeat Grid Next Icon Rail

Pesto UI · 117 documented components