Clinia UI

Hover Card

A preview that opens when a pointer rests on a link, such as a person or a record.

shadcn docs →

When to use

  • A preview of a linked person or record: a clinician's specialty and clinic, shown on their name.

When not to use

  • Information users need: put it on the page, or on the page the link opens.
  • A label for an icon button: use Tooltip.
  • Content with buttons or fields: use Popover.

Install

npx shadcn@latest add @clinia/hover-card
Dr. Jane Cooper

Anatomy

Dr. Jane Cooper
JC
Dr. Jane CooperCardiology · Montreal clinic. On call until 6 p.m.
  1. 1Trigger, a real linkdata-slot="hover-card-trigger"underline · decoration-accent
  2. 2Carddata-slot="hover-card-content"bg-popover · w-72 · p-4
  3. 3Name[data-part=name]font-medium
  4. 4Detail[data-part=detail]text-muted-foreground

Clinia rules

  • The trigger is a real link to the full record. The card previews what's there.
  • It opens after 600 ms and closes 300 ms after the pointer leaves. Change that with delay and closeDelay on the trigger.
  • Keep it to a few lines: a name, a role, one detail. It is w-72 by default.

Do and don't

JC
Dr. Jane CooperCardiology · Montreal clinic. On call until 6 p.m.
Do preview a name, a role, and one detail.
JC
Dr. Jane CooperCardiology · Montreal clinic. On call until 6 p.m.
Don't put buttons in it: touch screens can't open it. Use Popover.

Accessibility

Built in

  • Opens when the link gets keyboard focus as well as on hover, and closes when focus or the pointer leaves.
  • Waits 600 ms before opening, so a pointer passing over the link doesn't open it.

Your responsibility

  • Hover cards only open on hover and focus, and touch screens can't hover. Never put the only copy of information, or any action, inside one.
  • Only use it on a link whose destination holds the same information.
  • Style the trigger as a link with the borderless focus ring: focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2.

How to test

  1. Rest the pointer on the link: the card opens after a short delay.
  2. Press Tab to the link: the card opens, and Enter follows the link.
  3. With a screen reader, only the link is read. Check that the linked page has everything the card shows.

API

Every prop comes from Base UI Preview Card.

Related