Hover Card

Popover that appears on hover.

Installation


pnpm dlx shadcn@latest add @shark/hover-card


HoverCard
├── HoverCardTrigger
└── HoverCardContent


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


<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent>
    {/* Content */}
  </HoverCardContent>
</HoverCard>

The openDelay and closeDelay props control the delay before the hover card opens and closes respectively.

Default values are 100ms for closeDelay and 10ms for openDelay.

Control the position of the hover card relative to the trigger using the positioning prop.

Control the open state programmatically using the open and onOpenChange props.

❌

Use the disabled prop to prevent the hover card from opening on hover.

Root component. Manages hover state and content visibility.

Prop	Type	Default
`closeDelay`	`number`	`100`
`defaultOpen`	`boolean`	-
`disabled`	`boolean`	-
`immediate`	`boolean`	-
`onOpenChange`	`(details: OpenChangeDetails) => void`	-
`open`	`boolean`	-
`openDelay`	`number`	`10`
`positioning`	`PositioningOptions`	`{ placement: "top" }`
`className`	`string`	`-`

Shows the hover card on hover or focus.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	-

Content shown in a popover when hover card is open.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	-

Optional arrow pointing toward the trigger.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	-

Attribute	Default
`--arrow-background`	`var(--popover)`
`--arrow-size`	`calc(1.5 * var(--spacing))`

For a complete list of props, see the Ark UI documentation.

On This Page