Hover Card

Card on hover. Free, MIT · Overlays and notifications › Popovers and tours

Rich preview for sighted pointer users; the trigger must remain useful on its own.

Installation

npx valyro-cli@latest add hover-card

npx shadcn@latest add https://valyro.xyz/r/hover-card.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { HoverCard } from 'valyro-ui';

Prop	Type	Default
`trigger`	`ReactElement`		A single focusable element, typically a link. Or `HoverCard.Trigger`.
`children` *	`ReactNode`		Card content, e.g. a profile preview; stays open while the pointer is over it. In the compound form, a `HoverCard.Trigger` and a `HoverCard.Content` instead of `trigger` and the content.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`openDelay`	`number`	`500`	Delay before opening on hover/focus, ms.
`closeDelay`	`number`	`200`	Delay before closing once the pointer leaves the trigger and the card, ms.
`placement`	`Placement`	`'bottom'`
`offset`	`number`
`matchAnchorWidth`	`boolean`
`closeOnOutside`	`boolean`
`closeOnEscape`	`boolean`
`insideRefs`	`RefObject<Element \| null>[]`		Extra elements treated as "inside" for outside-press detection. The anchor is included automatically.
`surface`	`boolean`		Apply the shared `.ui-floating` material (default true).
`animation`	`'pop' \| 'fade' \| 'spring' \| 'none'`		Enter/exit: `pop` (the theme's), `fade`, `spring` (springs out of the anchor's side) or `none`.

HoverCard.Trigger (HoverCardTrigger), HoverCard.Content (HoverCardContent)