Ravox KitOverlays
Hover Card
A rich preview of a link (profile, order, product) on hover. Opens with a delay, waits before closing and stays open with the mouse inside it. By keyboard it opens on focus and Tab enters the card.
Reembolso do pedido #48213 aprovado por @marina.souza hoje às 14:32.
Settings
Examples
Order preview
Última compra: #48213
Product in a table
Tênis Corrida Leve 2R$ 399,00
Open fast, close slowly
Atribuído a Marina
Installation
The command creates components/ui/hover-card.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add hover-cardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | What appears in the card. It can have links and buttons: Tab enters it and leaves for the next element on the page. |
| children | ReactElement | — | The trigger: a single link or button. On touch the card doesn't open and the link remains a link. |
| side | "top" | "bottom" | "left" | "right" | "bottom" | Which side the card opens on. Flips when there is no room. |
| align | "start" | "center" | "end" | "center" | Alignment with the trigger. |
| openDelay | number | 600 | Wait before opening, in ms (avoids opening when the mouse is only passing by). |
| closeDelay | number | 250 | Wait before closing, in ms: gives time to move the mouse to the card. |
| sideOffset | number | 8 | Distance from the trigger, in px. |
| open / onOpenChange | boolean / (open) => void | — | Controlled mode. |
| className | string | — | Classes of the card (default width w-72, padding p-4). |