OdysseyUI

Hover Card

For sighted users to preview content available behind a link.

Made by imskyleen
Odyssey UI

Installation

Usage

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

API Reference

HoverCard

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

HoverCardTrigger

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

HoverCardContent

Odyssey 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 Shr3kx & iam-sahil. The source code is available on GitHub.

Last updated: 3/27/2026