RecordHoverCard

Measured live on app.attio.com's People table: hovering a record chip in the first column opens a 360px card about 500ms later, left-aligned 8px below the chip. It carries a 34px avatar, the name (16px/600) with a favourite star, a subtitle, the record's key attributes as 22px pills, and a row of 28px shortcut buttons (note, task, comment) under a hairline. It stays open while the pointer is on it and closes about 250ms after the pointer leaves both, on Escape, or on a press outside.

Wrap the chip: the card portals to the page, so it escapes a table's overflow, and the chip keeps its own box (no wrapper element is added). Focusing the chip opens it too, for keyboard users.

Installation

npm install @crisp-ui-kit/crisp

Props

RecordHoverCardAction

Custom content

The built-in layout covers Attio's card. When yours differs, pass render and own everything inside the surface; the card keeps its width, shadow, placement and open/close behaviour, and hands you close():

<RecordHoverCard
  render={({ close }) => (
    <MyAccountSummary id={id} onNavigate={close} />
  )}
>
  <RecordChip>Acme Inc</RecordChip>
</RecordHoverCard>

Notes

• Details slot. details renders between the pills and the shortcut row. Attio reserves an empty 24px band there while its lists section loads; crisp reserves nothing, so a card with no details is 12px shorter than Attio's loading state.
• The star renders only when onFavoriteChange is passed.
• Controlled use. open / defaultOpen / onOpenChange work as on Popover; a controlled card shows at once, openDelay only paces hover.