Overlays & feedback
Hover Card
A rich preview shown on hover — more than a tooltip can hold, less than a popover's commitment.
Usage
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@kanzo-tech/ui";<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">@ravenna</Button>
</HoverCardTrigger>
<HoverCardContent>…</HoverCardContent>
</HoverCard>Hover-only, so the content must be supplementary — anything a keyboard or touch user needs
belongs in a Popover instead, which opens on click.
A hover card is a preview, not content. It declares no role and wires no aria-*, so nothing
inside it is announced or reachable without a pointer — which is correct for a bonus and wrong
for anything a reader needs. See which of the three.
Anatomy
HoverCard
├── HoverCardTrigger
└── HoverCardContent (portal + positioner)
└── HoverCardArrow (rendered for you)API Reference
HoverCard
| Prop | Type | Default |
|---|---|---|
positioning | PositioningOptions | { placement: "top" } |
openDelay | number | 10 |
closeDelay | number | 100 |
lazyMount | boolean | true |
unmountOnExit | boolean | true |
Extends React.ComponentProps<typeof ArkHoverCard.Root>.
HoverCardContent is a fixed w-64; override it with className when the preview needs more
room.