HoverCard
먼저 보고, 그다음 계약을 읽습니다
hover(또는 focus)만으로 뜨는 가벼운 미리보기 카드 — @-멘션·링크 프리뷰용 (Radix HoverCard 기반).
Component intent의도와 경계 읽기
Tooltip 보다 풍부한 컨텐츠(아바타·요약·메타 줄)를, Popover 보다 가벼운 의도(클릭 없이 hover, 키보드 trap 없음)로 보여준다. Popover 와 **같은** .axe-popover__* 표면(elevated bg·border·shadow·arrow)을 재사용하며 새 CSS 토큰이 없다. 차이는 트리거뿐 — Popover 는 클릭, HoverCard 는 hover/focus 이고 openDelay/closeDelay 로 noisy 등장을 막는다. HoverCard(Root)·HoverCardTrigger·HoverCardContent·HoverCardArrow 를 조합한다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardArrow,} from "@axe/ui";<HoverCard> <HoverCardTrigger asChild> <a href="/u/kang">@강수훈</a> </HoverCardTrigger> <HoverCardContent side="top" align="start"> <HoverCardArrow /> <div className="preview"> <strong>강수훈</strong> <p>AXE Labs · 운영</p> </div> </HoverCardContent></HoverCard>import { HoverCard, HoverCardTrigger, HoverCardContent,} from "@axe/ui";<HoverCard openDelay={350} closeDelay={100}> <HoverCardTrigger asChild> <a href="/docs/deploy">배포 SSOT</a> </HoverCardTrigger> <HoverCardContent side="bottom" align="center" sideOffset={12}> <p>origin/main 의 commit SHA 가 배포의 SSOT…</p> </HoverCardContent></HoverCard>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
openDelay | number | — | 200 | hover 후 열리기까지 지연(ms) — HoverCard(Root) 에서 기본값 부여. |
closeDelay | number | — | 150 | 떠난 뒤 닫히기까지 지연(ms) — 트리거↔카드 사이 이동 시 깜빡임 방지. |
open | boolean | — | — | 열림 상태 (controlled). Radix Root prop. |
onOpenChange | (open: boolean) => void | — | — | 열림/닫힘 콜백 (Root). |
sideOffset | number | — | 8 | HoverCardContent 와 트리거 사이 간격(px) — Popover 와 동일. |
withPortal | boolean | — | true | HoverCardContent 를 portal 로 띄울지 — overflow:hidden 부모 탈출. |
...rest | 각 Radix HoverCard.* props | — | — | Trigger(asChild)·Content(side/align/collisionPadding)·Arrow 등 각 파트는 대응 Radix 컴포넌트 props 를 그대로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-popover__content | stable | 미리보기 카드 표면(Popover 와 공유 — elevated bg·border·shadow). |
.axe-popover__arrow | stable | 트리거를 가리키는 화살표(Popover 와 공유·Radix Arrow). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- 트리거로 Tab 이동(키보드 focus)만으로도 카드가 열림
- Esc 로 닫기
Radix HoverCard 는 보조 정보용이라 트리거에 팝업 role 을 강제하지 않는다(트리거는 보통 링크/앵커 그대로). hover 와 키보드 focus 두 경로로 열리며 focus 를 가로채지 않는다(trap 없음).
openDelay/closeDelay 로 등장·소멸을 디바운스. hover 전용이라 터치 환경에서는 뜨지 않으니 필수 정보를 여기에만 두지 말 것. prefers-reduced-motion 시 애니메이션 제거.