Hover Card

"use client"

import { Button } from "@/components/ui/button"

Use a hover card to preview extra detail behind a link, such as a contact's handle and join date next to a payee name. It opens on hover, focus or long press and can hold interactive content. Pick a tooltip for a short text label, and a popover when the content should open on press.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/hover-card
Copy

Usage#

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

Copy<HoverCardTrigger>
  <Button variant="link">Maria Lopez</Button>
  <HoverCard>Maria Lopez joined in March 2024.</HoverCard>
</HoverCardTrigger>

Composition#

Use the following composition to build a HoverCard:

CopyHoverCardTrigger
├── Button
└── HoverCard

Features#

• Opens on hover, keyboard focus and long press.
• Separate open and close delays.
• Placement with automatic flipping and an arrow that tracks the trigger.
• Content can hold links and buttons.

Trigger delays#

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

Copy<HoverCardTrigger delay={100} closeDelay={200}>
  <Button variant="link">Maria Lopez</Button>
  <HoverCard>Maria Lopez joined in March 2024.</HoverCard>
</HoverCardTrigger>

Sides#

Use the placement prop on HoverCard to set the side. The card flips when there is no room.

"use client"

import { Button } from "@/components/ui/button"

Accessibility#

• The trigger must be a focusable element, such as a Button or a link, so keyboard users can open the card with focus.
• The card is non-modal and does not trap focus.
• Hover is not available on every device. Do not put the only copy of key information, such as an amount or a status, inside the card.

API Reference#

HoverCardTrigger#

Wraps the trigger and the card and holds the open state.

HoverCard#

The card. Other popover props pass through.