호버 카드

호버 카드 (Hover Card)

호버 카드는 시력이 있는 사용자가 링크 뒤에 있는 콘텐츠를 미리 볼 수 있게 해주는 컴포넌트예요. 링크에 마우스를 올리면 작은 카드가 떠서 관련 정보를 보여주죠.

출처: 문서

본문

설치하기

CLI Manual 
npx shadcn@latest add hover-card

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-hover-card

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

더 알아보기 (Learn more)

  • Radix UI Hover Card — 호버 카드의 기반이 되는 Radix UI 프리미티브 문서예요.