Components
HoverCard
Hover-revealed rich card for previews, built on the Tooltip primitive.
HoverCard reveals a wider, padded card on hover or focus — use it for rich
previews like user profiles, link previews, or definitions, where a plain
Tooltip is too small. It wraps Tooltip, so it inherits the same portaling,
delay, and Escape-to-close behavior. Pass the hover target via trigger and
the card body as children; control which edge it opens on with side.
Example
Preview
import { HoverCard } from '@officina/ui';
<HoverCard trigger={<a href="/u/lucio">@lucio</a>} side="bottom">
<strong>Lucio Chiummo</strong>
<p>Maintainer · joined 2024</p>
</HoverCard>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Card content shown on hover. |
| trigger* | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Element that reveals the card on hover/focus. |
| side | enum | bottom | Side of the trigger to position the card. |