Hover Card
A preview shown while the pointer rests on a link, such as a traveller or a place. Looks like Popover.
import { HoverCard, HoverCardTrigger, HoverCardContent } from "pleate/hover-card";Traveller preview
Planned by Marta Silva with three friends, 14 to 18 May.
Props
- HoverCard openDelay
Milliseconds the pointer rests before the card opens.
numberdefault 400- HoverCard closeDelay
Milliseconds before it closes after the pointer leaves.
numberdefault 150- HoverCard open / onOpenChange
Controlled state (Radix HoverCard root).
boolean / (open) => void- HoverCardContent side
Which edge of the trigger it opens on.
"top" | "right" | "bottom" | "left"default "bottom"- HoverCardContent align
Alignment along that edge.
"start" | "center" | "end"default "center"- HoverCardContent sideOffset
Gap to the trigger in px.
numberdefault 8- HoverCardContent arrow
Small arrow toward the trigger.
booleandefault false
Accessibility
- Opens on hover and on keyboard focus, never on touch: the trigger must work without it.
- Content is supplementary; don't put the only copy of information there.