Skip to main content
ShadcnUI
Navigation

Hover Card

A noninteractive preview that enriches a complete ordinary link.

When to use it. Use for optional destination context that is also available at that destination. Never hide unique task information or required actions in a preview.

Native baseline A single text-labelled link owns a trusted presentation-only HEEx preview. Forms, focusable controls, scripts, fetching media and nested links are rejected. Content meaning and privacy remain caller obligations, not markup validation. Progressive enhancement Package CSS adds the optional presentation only when its complete capability gate passes. No interestfor or popover=hint is used. Coarse-pointer users follow the link. Missing hover/focus loses only the preview; RTL and missing anchors retain normal flow. No loading, timers, analytics or long-press emulation are installed. Exact fallback Always-visible ordinary content below remains available. Without script, native controls still work when their required platform features exist. Without CSS, native dialogs/popovers still need invocation; supplemental content is visible in flow. Without invokers or Popover, use the ordinary alternative. Without anchors use bounded default placement; without transitions or with reduced motion it snaps. No hover/coarse pointer retains the complete trigger or link. Forced colors preserves borders and focus; narrow/zoomed text wraps, RTL uses logical edges or supplemental flow. Replacing the subtree does not restore its open state or focus.

How it works

  • <.hover_card> A single text-labelled link owns a trusted presentation-only HEEx preview. Forms, focusable controls, scripts, fetching media and nested links are rejected. Content meaning and privacy remain caller obligations, not markup validation.
  • package CSS Package CSS adds the optional presentation only when its complete capability gate passes. No interestfor or popover=hint is used. Coarse-pointer users follow the link. Missing hover/focus loses only the preview; RTL and missing anchors retain normal flow. No loading, timers, analytics or long-press emulation are installed.
  • gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :hover_card does not ship them.
  • application boundary Dialog and Drawer are modal; Alert Dialog adds consequence semantics and safe cancel focus. Popover is nonmodal; Dropdown Actions contains ordinary controls, not ARIA menus. Tooltip and Hover Card are supplemental only. Use ordinary links for destinations, buttons for actions and visible Help for required guidance. Interest invokers and interactive previews are deferred.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

The link keeps its accessible name, href, target, rel, download, current location and native keyboard/context-menu behavior. The preview never takes focus; hover/focus-within can reveal it.

Hover Card support and fallback
Feature Locked-engine evidence When missing
Native baseline Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. Always-visible ordinary content below remains available. Without script, native controls still work when their required platform features exist. Without CSS, native dialogs/popovers still need invocation; supplemental content is visible in flow. Without invokers or Popover, use the ordinary alternative. Without anchors use bounded default placement; without transitions or with reduced motion it snaps. No hover/coarse pointer retains the complete trigger or link. Forced colors preserves borders and focus; narrow/zoomed text wraps, RTL uses logical edges or supplemental flow. Replacing the subtree does not restore its open state or focus.
Progressive enhancement The locked-engine evidence exercises the authored complete capability gate. Always-visible ordinary content below remains available. Without script, native controls still work when their required platform features exist. Without CSS, native dialogs/popovers still need invocation; supplemental content is visible in flow. Without invokers or Popover, use the ordinary alternative. Without anchors use bounded default placement; without transitions or with reduced motion it snaps. No hover/coarse pointer retains the complete trigger or link. Forced colors preserves borders and focus; narrow/zoomed text wraps, RTL uses logical edges or supplemental flow. Replacing the subtree does not restore its open state or focus.
Exact fallback The locked-engine matrix retains the documented native or static outcome. Always-visible ordinary content below remains available. Without script, native controls still work when their required platform features exist. Without CSS, native dialogs/popovers still need invocation; supplemental content is visible in flow. Without invokers or Popover, use the ordinary alternative. Without anchors use bounded default placement; without transitions or with reduced motion it snaps. No hover/coarse pointer retains the complete trigger or link. Forced colors preserves borders and focus; narrow/zoomed text wraps, RTL uses logical edges or supplemental flow. Replacing the subtree does not restore its open state or focus.

Ordinary alternative: complete information and controls

Read the complete manual and review preferences here without opening a surface. No data is saved or deleted.

Practical guidance, also available in the complete manual. Also available as plain text.

معلومات إضافية متاحة أيضًا في الدليل الكامل.

Required help stays visible. A real application must provide its complete task here or at an ordinary route, not only inside an overlay.

Application ownership and API

Applications own routes, authorization, CSRF, validation, persistence, loading, outcomes and replacement. Replacing an open subtree may close it and lose native focus; these examples do not restore it or synchronize state. No real operation is executed.

Choosing the related control. Dialog and Drawer are modal; Alert Dialog adds consequence semantics and safe cancel focus. Popover is nonmodal; Dropdown Actions contains ordinary controls, not ARIA menus. Tooltip and Hover Card are supplemental only. Use ordinary links for destinations, buttons for actions and visible Help for required guidance. Interest invokers and interactive previews are deferred.

Public API Package source

Provenance

Catalogue identity overlays.hover-card, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Replace emerging interest-invoker activation with supplemental CSS hover/focus-within, a complete text-labelled native link, constrained trusted presentation HEEx, scoped optional anchors and ordinary navigation without top-layer or loading behavior.