Hover Card

A popover that appears on hover, focus, or long press to preview content available behind a link.

Installation


bunx --bun fabricator-ui@latest add hover-card

Usage

import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card"

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard>
    The React Framework – created and maintained by @vercel.
  </HoverCard>
</HoverCardTrigger>

Composition

Use the following composition to build a HoverCard:

HoverCardTrigger
├── Button
└── HoverCard

Trigger Delays

Use delay and closeDelay on the HoverCardTrigger to control when the card opens and closes.

<HoverCardTrigger delay={100} closeDelay={200}>
  <Button variant="link">Hover</Button>
  <HoverCard>Content</HoverCard>
</HoverCardTrigger>

Positioning

Use the placement prop on HoverCard to control placement.

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard placement="top">Content</HoverCard>
</HoverCardTrigger>

Basic

Sides

API Reference

See the React Aria documentation for more information.

Search documentation