Hover Card

요소 위에 마우스를 올렸을 때 추가 콘텐츠를 표시하는 컴포넌트예요. 카드에 대한 부가 정보를 손쉽게 보여줘요.

출처: 문서

본문

사용법 (Usage)

import { HoverCard } from "@chakra-ui/react"

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Positioner>
    <HoverCard.Content>
      <HoverCard.Arrow>
        <HoverCard.ArrowTip />
      </HoverCard.Arrow>
    </HoverCard.Content>
  </HoverCard.Positioner>
</HoverCard.Root>

단축키 (Shortcuts)

HoverCard는 흔한 사용 사례에 대한 단축키를 제공해요.

Arrow

HoverCard.Arrow는 기본적으로 HoverCard.ArrowTip 컴포넌트를 내부에 렌더링해요.

이렇게 쓸 수 있어요:

<HoverCard.Arrow>
  <HoverCard.ArrowTip />
</HoverCard.Arrow>

화살표 팁을 커스터마이즈할 필요가 없다면 이렇게 더 간결하게 쓸 수도 있어요.

<HoverCard.Arrow />

예제 (Examples)

제어 (Controlled)

open과 onOpenChange prop을 사용해 호버 카드의 표시 여부를 제어해요.

여러 개의 트리거 (Multiple Triggers)

링크마다 호버 카드를 따로 마운트하지 마세요. 하나의 Root 아래 각 Trigger에 value를 넣으면 돼요. 다른 트리거에 마우스를 올리면 같은 카드가 그 위치로 이동해요.

지연 (Delays)

openDelay와 closeDelay prop을 사용해 열리고 닫히는 지연 시간을 제어해요.

배치 (Placement)

positioning.placement prop을 사용해 내부의 floating-ui 위치 지정 로직을 설정해요.

비활성화 (Disabled)

disabled prop을 사용해 상호작용 시 호버 카드가 열리지 않도록 방지해요.

다이얼로그에서 열기 (Open From Dialog)

Dialog 안에서 HoverCard를 사용할 때는 HoverCard.Positioner를 문서 body로 포탈하지 않아야 해요.

-<Portal>
  <HoverCard.Positioner>
    <HoverCard.Content>
      {/* ... */}
    </HoverCard.Content>
  </HoverCard.Positioner>
-</Portal>

접근성 (Accessibility)

HoverCard는 컨텍스트를 이해하는 데 필수적이지 않은 보충 정보에만 사용해야 해요.

스크린 리더로 접근할 수 없고 키보드로 활성화할 수도 없으므로, 중요한 콘텐츠를 그 안에 넣지 마세요.

Props

Root

HoverCard 컴포넌트의 Root 부분에 대한 prop 테이블 (대화형 문서 참고).

Trigger

HoverCard 컴포넌트의 Trigger 부분에 대한 prop 테이블 (대화형 문서 참고).