Hover card

When to use

• To preview a linked item without leaving the list: a client's program, last check-in and next payment when hovering their name in a table.
• When the preview is a shortcut for mouse users, and the link itself leads to the full information.

When not to use

• When the content is the only place the information appears: put it on the page or behind the link. Hover cards don't open on touch.
• For buttons, links or fields inside the card: use a Popover, which opens on click and can hold controls.
• To name an icon button: use a Tooltip.

Anatomy

Hover a client's name above to see its parts: the trigger, which is always a link to the full page, and the content card next to it with a summary (avatar, name, program, last check-in, next payment). There is no arrow and no close button.

Variants

There is one style. The content varies with what the link points to:

Width is w-64. Keep it to four or five short lines.

States

The open and close delays are Radix's defaults (openDelay 700ms, closeDelay 300ms). There is no motion token for hover delays.

Usage guidelines

• The trigger must be a real link that works on its own. The card is a preview of where it goes.
• Show only what helps decide whether to click: no actions, no long text.
• Don't put hover cards on every cell. One per row, on the name, is enough.

Content guidelines

• Lead with the name, then the facts in the order a coach scans them: program, status, money.
• Short label-value lines: "Last check-in: 2 days ago", "Next payment: 24 Oct".
• Arabic: "آخر متابعة: قبل يومين". Dates in the same format as the rest of the table.

Accessibility

• The card is a visual preview only. Screen readers don't move into it, and nothing in it can be focused, so everything in it must also be on the linked page.
• A screen reader announces the link as usual: "Sara Al-Otaibi, link".
• The card stays open while the pointer moves onto it, so it can be read (WCAG 1.4.13). It doesn't open on touch.

RTL

The card is centered on the link, so its position is the same in both directions. Inside, it follows the direction: the avatar sits at the start (right in RTL) and text aligns to the start. If you change align or side, note that Radix treats them as physical: align="start" lines up with the left edge in both directions.

Tokens used

Read from components/ui/hover-card.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.

• Layerz-(--z-popover)
• Radiusrounded-md
• Shadowshadow-md

Props

HoverCard takes openDelay and closeDelay. HoverCardContent defaults to align="center" and sideOffset={4}.

Replaces in coach-admin

coach-admin has no hover preview today. This component is for new work, such as client summaries in the client list.

Related

Popover, Tooltip, Table, Avatar.