전체 카탈로그
OverlayHoverCard11 props

Hover Card

HoverCard shows additional information when the user hovers or focuses a trigger element. Use it for profile cards, link summaries, or inline definitions where the user needs mo...

공식 문서 열기
live previewOverlay

Preview

Preview card

Hover cards add supplemental detail.

Import

import {HoverCard} from '@astryxdesign/core/HoverCard';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

HoverCard shows additional information when the user hovers or focuses a trigger element. Use it for profile cards, link summaries, or inline definitions where the user needs mo...

hovercardhover cardpopovertooltippreview cardflyoutoverlayhover popup

Important props

placementabove | below | start | endoptional
alignmentstart | center | endoptional
focusTriggerauto | always | neveroptional
hasHoverIndicationauto | booleanoptional

Theming targets

astryx-hovercard

Best practices

  • DoKeep content supplementary; hover cards should enhance understanding without blocking the primary workflow.
  • DoProvide a dashed underline on text triggers so users know the element is hoverable.
  • DoUse the hook API (useHoverCard) when you need more control over timing or placement.
  • Do notPlace critical actions or required information inside a hover card; users may miss content that only appears on hover.