ExperimentalmoleculeOverlays

Hover card

A preview of a person or company that opens when the pointer rests on its name.

import { … } from "@brdgapp/ui/components/hover-card"

Usage

HoverCard is a preview that opens when the pointer rests on a name or logo for 300ms: who someone is, or what a company does, without leaving the page. The name stays a link to the full page. The card is read-only: no buttons. The usual mistake is putting actions inside, where touch and keyboard users can't reach them.

When to use

On a person's name or face in a feed, table or list, to show who they are.
On a company or fund's name or logo, to show what it does.

When not to use

To explain a word or a number in a sentence or two. Use InfoHint, HoverTip and Tip instead.
For actions on a row. Use a menu on the row. Use ActionMenu instead.
For anything people must see to finish the task. Touch screens have no hover: put it on the page.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

Anatomy

Leah Okonkwo

Trigger. A person's name, face or a company logo. A link to the full page, styled where it's used.
Card. 320px wide, --surface-elevated, a --border-default line, 12px corners, 12px padding and the tip shadow. Opens below, lined up with the trigger's start, and flips when there's no room.
Contents. Who or what it is: a face or logo, the name, a line about them, and a few tags. Text and pictures only.

Examples

People in a feed

Rest the pointer on a name, or Tab to it. Moving across names quickly doesn't open cards along the way.

Marcus Bell introduced Fatima Al-Sayed to Isabella Rossi2 days ago
Ana Ruiz introduced Priya Natarajan to Leah Okonkwo4 days ago
Marcus Bell introduced Mei Lin Zhou to Ravi MenonSep 2

A company

What it does and its stage, from its logo or name.

Quillbase2 people you know

States

State	What happens
Closed	Only the trigger shows.
Opening	300ms after the pointer rests on the trigger, or when the trigger gets keyboard focus, the card fades and grows in (150ms).
Open	Stays open while the pointer is on the trigger or the card.
Closing	150ms after the pointer leaves both, or on Escape.

Behavior

Opens on hover and on keyboard focus. Touch screens have no hover: tapping the trigger follows its link.
The 150ms close delay lets the pointer travel from the name onto the card.
Floats above the page (it's moved to the end of the page), so a card with hidden overflow can't clip it.
className on the card sets its width only: w-72, w-[374px].

Do and don't

Show who someone is: face, name, title, company, a few tags.

Don't

Put “Mark as alum” or “Not a fit” buttons in the card.

Keep the trigger a link to the full profile.

Don't

Make the hover card the only way to see the details.

Content

Lead with the name, then the title and company: “Partner, Saltmarsh Partners”.
For a company: what it does in one line, then stage and type as tags.

Accessibility

Opens on keyboard focus as well as hover, and closes on Escape.
The trigger is a real link, so the full page is always one click or tap away.
Nothing in the card can be clicked, so nothing is lost for people who can't hover.

Keys	Action
`Tab`	Focusing the trigger opens the card.
`Enter`	Follows the trigger's link to the full page.
`Escape`	Closes the card.

API reference

HoverCard

Holds the trigger and the card. Extends Base UI PreviewCard.Root props (open, onOpenChange, defaultOpen).

Prop	Type	Default	Description

HoverCardTrigger

The name or logo people hover. A link by default. Extends Base UI PreviewCard.Trigger props.

Prop	Type	Default	Description
`href`	`string`	—	The full page: the person's profile, the company's page.
`render`	`ReactElement`	—	Your router's link (or a button) instead of a plain link.
`delay`	`number`	`300`	Milliseconds before it opens. Keep the default.
`closeDelay`	`number`	`150`	Milliseconds before it closes. Keep the default.
`className`	`string`	—	Layout only.

HoverCardContent

The card.

Prop	Type	Default	Description
`side`	`"bottom" \| "top" \| "left" \| "right"`	`"bottom"`	Where it opens. Flips when there's no room.
`align`	`"start" \| "center" \| "end"`	`"start"`	Lines up with the trigger's start.
`className`	`string`	—	Width only: `w-72`.

Lineage

What it's built from and where it's used, read from the code. When you change it, check these too.

Built from: Nothing else in the package
Used by components: None
Used in patterns: None
Used in templates: None