Hover Card

Overlays

For sighted users to preview content available behind a link.

Import

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

Hover over the link to see the preview.

defaultOpen—

boolean

The open state of the hover card when it is initially rendered

open—

boolean

The controlled open state of the hover card

onOpenChange—

(open: boolean) => void

Event handler called when the open state of the hover card changes

openDelay700

number

The duration from when the mouse enters the trigger until the hover card opens

closeDelay300

number

The duration from when the mouse leaves the trigger until the hover card closes

Prop	Type	Default	Description
`defaultOpen`	`boolean`	—	The open state of the hover card when it is initially rendered
`open`	`boolean`	—	The controlled open state of the hover card
`onOpenChange`	`(open: boolean) => void`	—	Event handler called when the open state of the hover card changes
`openDelay`	`number`	700	The duration from when the mouse enters the trigger until the hover card opens
`closeDelay`	`number`	300	The duration from when the mouse leaves the trigger until the hover card closes