A supplementary preview of a link or subject, opened by hover or keyboard focus.
<tp-preview-card>
Preview Card
Default density
Compact density
Restart from the initial state
Show the copyable source
Reviewed by
@maya
Maya LindqvistDesign engineer on the Platform team. Maintains the component library.Joined March 2024
before release.
Reviewed by
@maya
Maya LindqvistDesign engineer on the Platform team. Maintains the component library.Joined March 2024
before release.
<div style="font-size:var(--tp-text-sm)">
Reviewed by
<tp-preview-card label="Maya Lindqvist profile">
<tp-button slot="trigger" variant="link" href="#maya-lindqvist">@maya</tp-button>
<div style="display:grid;grid-template-columns:auto 1fr;gap:var(--tp-space-3);max-inline-size:18rem">
<tp-avatar fallback="ML" alt="Maya Lindqvist"></tp-avatar>
<div style="display:grid;gap:var(--tp-space-1)">
<strong>Maya Lindqvist</strong>
<span style="color:var(--tp-muted-foreground)">Design engineer on the Platform team. Maintains the component library.</span>
<span style="color:var(--tp-muted-foreground);font-size:var(--tp-text-xs)">Joined March 2024</span>
</div>
</div>
</tp-preview-card>
before release.
</div>
Usage
A Preview Card shows nonessential context about its subject, like a profile behind a mention or the summary behind a link. Hover or keyboard focus opens it after open-delay; pressing the trigger still follows the link. It never traps focus or blocks the page, so keep anything needed to finish a task in a Popover instead.
The optional backdrop is decorative and does not intercept input. A disabled preview leaves its subject’s normal action available. Content has group semantics and contributes an accessible description to the active subject without replacing its name or adding menu/dialog expanded semantics.
Multiple triggers can use registerTrigger or SurfaceHandle with identifiers and payloads. Their optional openDelay/closeDelay override the corresponding group delay. content(payload) and showViewport render a shared preview as its subject changes. Removing the active trigger closes the preview and releases its timers, description association and positioning observation.
Escape dismisses without activating the subject.
Delays
open-delay (600ms by default) avoids flashing cards while the pointer passes over, and close-delay (300ms) gives the pointer time to travel into the card. Shorten them when previews are the point of the surface.
Delays
Default density
Compact density
Restart from the initial state
Show the copyable source
Release 2.4
Release 2.4Latest
Shared workspaces, faster search indexing and 38 bug fixes.
Release 2.4
Release 2.4Latest
Shared workspaces, faster search indexing and 38 bug fixes.
By default the pointer can move into the card to select or scroll its content. disable-hoverable-popup closes the card as soon as the pointer leaves the trigger, for purely glanceable previews.
Not hoverable
Default density
Compact density
Restart from the initial state
Show the copyable source
EventTypeDescriptiontp-open-changeTpSurfaceOpenChangeEventCancelable proposal to open or close, before the surface changes; detail.value is the proposed state, detail.reason what asked (a trigger press, hover or focus, Escape, an outside press, a close action or code) and detail.trigger the trigger. On a close, detail.preventUnmountOnClose() keeps the content mounted.tp-open-change-completeCustomEvent<{ open: boolean; }>After the surface finishes opening or closing; detail.open.
Slots
SlotDescriptiondefaultThe preview content.triggerThe link or subject the card previews, usually a link Button.
Related
Components, widgets and patterns that use this one.