Components
Tooltip
요소에 마우스를 올렸을 때 보조 정보를 간결하게 보여주는 팝업 컴포넌트
Tooltip
Tooltip은 아이콘 버튼이나 약어처럼 추가 설명이 필요한 요소에 hover 시 간결한 힌트를 제공합니다.
Radix UI Tooltip을 기반으로 하며, 항상 TooltipProvider로 감싸야 합니다.
Examples
공실률 4.2%
사용법
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@seoulpi/ui";
// TooltipProvider는 페이지 루트 또는 레이아웃에 한 번만 두면 됩니다
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">저장</Button>
</TooltipTrigger>
<TooltipContent>
<p>저장 (⌘S)</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>;Props
<Tooltip> (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 700 | 툴팁이 나타나기까지의 지연 시간 (ms) |
open | boolean | — | 제어 컴포넌트로 사용 시 열림 상태 |
defaultOpen | boolean | false | 비제어로 사용 시 초기 열림 상태 |
<TooltipContent>
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | 툴팁이 나타날 방향 |
sideOffset | number | 4 | 트리거에서 떨어지는 픽셀 거리 |
align | "start" | "center" | "end" | "center" | 트리거 대비 정렬 |
예시
위치별 설정
<TooltipContent side="right">우측 툴팁</TooltipContent>
<TooltipContent side="bottom" align="start">하단 좌측 정렬</TooltipContent>