Hover Card

A card that appears when hovering over a trigger, useful for previewing content.

CMSPayload CMS Integration

Hover cards can preview CMS content like user profiles, article summaries, or linked document information.

CMS Demo

See how content editors configure hover cards in a CMS:

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.

CMS ConfigurationSimulates Payload CMS hover card configuration

Basic Usage

User profile preview

Different positions

Link preview

Check out this article for more information.

Hover CardContent preview on hover

Installation

pnpm add @corew500/ui

Usage

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@mordecai-design-system/ui"

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    Preview content appears here
  </HoverCardContent>
</HoverCard>

Examples

User Profile Preview

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/user/john">@john</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex space-x-4">
      <Avatar src="/john.jpg" />
      <div>
        <h4 className="font-semibold">John Doe</h4>
        <p className="text-sm text-muted-foreground">
          Software Engineer at Acme Inc.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Positioning

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="right" align="start">
    Positioned to the right
  </HoverCardContent>
</HoverCard>

Sub-components

| Component | Description | |-----------|-------------| | HoverCard | Root component managing hover state | | HoverCardTrigger | Element that triggers the card on hover | | HoverCardContent | The floating card content |

Props

HoverCardContent

Prop	Type	Default	Description
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`align`	enum	`center`	How to align the popup relative to the specified side.
`alignOffset`	enum	`4`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner alignOffset={({ side, align, anchor, positioner }) => { return side === 'top' \|\| side === 'bottom' ? anchor.width : anchor.height; }} /> ```
`side`	enum	`bottom`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`sideOffset`	enum	`4`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. @example ```jsx <Positioner sideOffset={({ side, align, anchor, positioner }) => { return side === 'top' \|\| side === 'bottom' ? anchor.height : anchor.width; }} /> ```

HoverCard

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.

Accessibility

Opens on hover and focus for keyboard users
Content is announced to screen readers
Escape key closes the card