Hover Card

For sighted users to preview content behind a link or control. Prefer align="start" when the card should follow writing direction.

Basic

Preview rich content when the user hovers a trigger.

Installation

CLI

npx @sonojs/ui@latest add hover-card

Composition

structure

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Usage

hover-card.tsx

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

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover</HoverCardTrigger>
      <HoverCardContent>
        Preview content for sighted users — links, profiles, and short facts.
      </HoverCardContent>
    </HoverCard>
  )
}

Props

Prop	Type	Default	Description
openDelay	number	700	On HoverCard — ms before the card opens on hover.
closeDelay	number	300	On HoverCard — ms before the card closes.
side	"top" · "right" · "bottom" · "left"	"bottom"	On HoverCardContent — physical edge for placement.
align	"start" · "center" · "end"	"center"	On HoverCardContent — prefer start/end for RTL-aware layouts.
asChild	boolean	false	On HoverCardTrigger — merge props into the child (e.g. Button).