Hover Card
@/components/kamod-ui/hover-card
Installation
Import HoverCard, HoverCardTrigger and HoverCardContent from `@/components/kamod-ui/hover-card`.
pnpm add @kamod-ch/uiUsage
Wrap a trigger and content. Use openDelay and closeDelay on HoverCard to avoid accidental opens. Use HoverCardTrigger asChild to use a Button or link. Position content with side and align on HoverCardContent.
import { HoverCard } from "@/components/kamod-ui/hover-card";<HoverCard />Demo
Link-style Button trigger and structured body (shadcn HoverCardDemo).
Usage
Minimal unstyled trigger (default button chrome).
Trigger delays
openDelay and closeDelay on HoverCard (shadcn Trigger Delays).
Positioning
side and align on HoverCardContent (shadcn Positioning).
Sides
All four sides (shadcn Sides).
API Reference
Props, slots and variants for this component.
Hover Card
Hover Card component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| openDelay | number | 700 |
| closeDelay | number | 300 |
| defaultOpen | boolean | false |
| side | "top" | "bottom" | "left" | "right" | "bottom" |
| align | "start" | "center" | "end" | "center" |
| sideOffset | number | 8 |
| asChild | boolean | false |
Accessibility Notes
Content is keyboard-dismissible with Escape. Triggers open on focus with the same delay as hover. Ensure critical actions are not only available inside the hover surface; provide redundant paths where needed.