Components

Hover Card

A preview of what a link points to, like a person or an account: a glass card once the pointer rests on the link, or while it has keyboard focus.

Paid to Priya Sharma on 3 October.

Import

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@rinzai/zen';

Examples

Trend

More than a name: each merchant's spending over six months, a glance away.

Corner Market
City Transit

API reference

A preview of what a link points to, e.g. a person or an account: a glass card shown after the pointer rests on the link (openDelay), or while it has keyboard focus, and kept while the pointer or focus is on the card. Escape hides it. What it shows is extra, out of the tab order: everything in it should be reachable by following the link too. Put a HoverCardTrigger and a HoverCardContent inside (it can go in a paragraph).

Prop	Type	Default
`closeDelay` How long it stays after the pointer leaves, in ms, so the pointer can reach it. Default 200.	`number`	`200`
`openDelay` How long the pointer rests on the trigger before the card shows, in ms. Default 500.	`number`	`500`

<HoverCardTrigger>

What the card previews: a link by default (give it href). With asChild, your own element (e.g. your router's link).

Prop	Type	Default
`asChild` Put the trigger's props on your own element instead of rendering a link.	`boolean`	`—`

<HoverCardContent>

The card: glass, below the trigger (above it if there's no room), lined up with its start by default.

Prop	Type	Default
`align` Lined up with the trigger's start (default) or end edge, or centred on it.	`"center" \| "end" \| "start"`	`—`
`offset` Gap from the trigger, in px.	`number`	`—`

Zen