Hover Card

링크 뒤의 콘텐츠를 미리 볼 수 있도록 표시합니다.

examples/krds/hover-card-demo.tsx

import { Button } from "@/components/ui/button"
import {
  HoverCard,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/hover-card.json

사용법

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

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

구성

다음 조합으로 HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

트리거 지연

Use openDelay and closeDelay on the HoverCard to control when the card opens and closes.

<HoverCard openDelay={100} closeDelay={200}>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

위치 지정

Use the side and align props on HoverCardContent to control placement.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

예제

Basic

examples/krds/hover-card-demo.tsx

import { Button } from "@/components/ui/button"
import {
  HoverCard,

Sides

examples/krds/hover-card-sides.tsx

import { Button } from "@/components/ui/button"
import {
  HoverCard,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/hover-card-rtl.tsx

"use client"

import {

API 참조

Radix UI 문서를 참고하세요.

File Upload Input