Hover Card

side

sideOffset

align

alignOffset

Installation

Usage

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardPortal>
    <HoverCardContent>
      <p>Hover card content</p>
    </HoverCardContent>
  </HoverCardPortal>
</HoverCard>

API Reference

Radix UI API Reference - HoverCard.Root

HoverCardTrigger

Radix UI API Reference - HoverCard.Trigger

HoverCardPortal

Radix UI API Reference - HoverCard.Portal

The forceMount property is not supported in the HoverCardPortal component, as it is used for animation.

HoverCardContent

Radix UI API Reference - HoverCard.Content

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

The asChild and forceMount props are not supported in the HoverCardContent component as it is used for animation.

Credits

Radix UI Hover Card

Hover Card

On this page