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...
공식 문서 열기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.