Hover Card

For sighted users to preview content available behind a link.

Made by imskyleen
Edit on GitHub
Open in
Animate UI

Installation

Usage

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

API Reference

HoverCard

Radix UI API Reference - HoverCard.Root
PropTypeDefault
followCursor?
boolean | "x" | "y"
false
followCursorSpringOptions?
SpringOptions
{ stiffness: 200, damping: 17 }

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
PropTypeDefault
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

Built by Skyleen. The source code is available on GitHub.

Last updated: 11/18/2025