Animate UI

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>
  <HoverCardContent>
    <p>Hover card content</p>
  </HoverCardContent>
</HoverCard>

API Reference

HoverCard

Animate UI API Reference - HoverCard PrimitiveRadix UI API Reference - HoverCard.Root

HoverCardTrigger

Animate UI API Reference - HoverCard Trigger PrimitiveRadix UI API Reference - HoverCard.Trigger

HoverCardContent

Animate UI API Reference - HoverCard Content PrimitiveRadix 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.