Overlays / The visual dictionary

Hover card.

A richer contextual preview revealed near an item.

Also calledpreview cardprofile popover
01

See it in context

UI illustration
@minachen
MCMina ChenProduct designer

A hover card presents supporting details such as a person’s role or a link preview. It should also be available through keyboard focus or an explicit action and remain reachable when it contains controls.

When to use it

Use for optional details that would clutter the base view.

Know the difference

A hover card is rich contextual content; a tooltip is brief descriptive text.

WebiOSiPadOSAndroidmacOSWindowsLinuxvisionOS

iOS · iPadOS · macOS · visionOS

Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.

Web · Android · Windows · Linux

On the web, manage keyboard focus and dismissal explicitly. Android and desktop implementations should use the equivalent native surface when available.

Primary documentation for the pattern and its platform conventions.