Tooltip
짧은 보조 설명을 hover와 focus에 제공합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/tooltip.tsx- 소스
- 소스
- 외부 의존성
radix-ui
실제 미리보기
사용할 때
사용 기준
아이콘처럼 보이는 이름만으로 뜻이 부족한 컨트롤을 보완할 때 씁니다.
사용하지 않을 때
필수 정보, 긴 설명, 터치만으로 접근해야 하는 행동에 의존하지 않습니다.
변형과 상태
closed고정 예시툴팁 없이도 트리거 이름이 남는지 확인합니다.
open직접 조작짧은 문장이 화면 안에 배치되고 트리거를 가리지 않는지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
hover뿐 아니라 keyboard focus에서도 열리고 트리거 설명으로 연결됩니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
delayDuration | number | 아니요 | Provider가 hover 열림 지연을 밀리초로 정합니다. |
side | "top" | "right" | "bottom" | "left" | 아니요 | 우선 배치 방향입니다. |
sideOffset | number | 아니요 | 트리거와의 간격입니다. |
사용 예시
지원 importimport {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip"
<TooltipProvider>
<Tooltip>
<TooltipTrigger aria-label="Status">●</TooltipTrigger>
<TooltipContent>Operational</TooltipContent>
</Tooltip>
</TooltipProvider>