Hover Card

Card that appears on hover with preview content

Basic Usage

User profile preview

Different positions

Link preview

Check out this article for more information.

pnpm add @corew500/ui

import { HoverCard } from "@corew500/ui/hover-card"

<HoverCard>Content</HoverCard>

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Created by @sarahj

CMS FieldsEN

Display Name

Bio

Show Location

Show Join Date

This simulates how a content editor configures user profile hover cards in Payload CMS. User data typically comes from a relationship field.

Prop	Type	Default	Description
`defaultOpen`	enum	`false`	Whether the preview card is initially open. To render a controlled preview card, use the `open` prop instead.
`open`	enum	—	Whether the preview card is currently open.
`onOpenChange`	(open: boolean, eventDetails: PreviewCardRootChangeEventDetails) => void	—	Event handler called when the preview card is opened or closed.
`onOpenChangeComplete`	(open: boolean) => void	—	Event handler called after any animations complete when the preview card is opened or closed.
`actionsRef`	RefObject<PreviewCardRootActions>	—	A ref to imperative actions. - `unmount`: Unmounts the preview card popup. - `close`: Closes the preview card imperatively when called.
`handle`	PreviewCardHandle<unknown>	—	A handle to associate the preview card with a trigger. If specified, allows external triggers to control the card's open state. Can be created with the PreviewCard.createHandle() method.
`triggerId`	string	—	ID of the trigger that the preview card is associated with. This is useful in conjuntion with the `open` prop to create a controlled preview card. There's no need to specify this prop when the preview card is uncontrolled (i.e. when the `open` prop is not set).
`defaultTriggerId`	string	—	ID of the trigger that the preview card is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.