overlay · Normal DOM only

HoverCard

Rich, hover-revealed preview of a record (user, document, deal). Opens after delay, closes on outside hover.

Use HoverCard for at-a-glance details on a reference (avatar, mention, document link). Tooltips are too small for rich content; popovers require a click. HoverCard sits in the middle — passive, but expressive.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { HoverCard } from '@8maverik8/twenty-design';

Examples

User preview

A@alice

tsx
<HoverCard trigger={<Avatar … />}>…</HoverCard>

Guidelines

✓

Tune openDelay (~200 ms) so the card does not flash on a fast cursor pass.Instant cards are annoying when the user just scans past.

Put interactive controls inside a HoverCard.It will close the moment the cursor leaves the trigger — interaction is unreliable. Use Popover.