03 · Components · 도움
툴팁Tooltip
아이콘 버튼의 의미·축약 레이블의 전체 이름 등 짧은 보조 설명을 호버·포커스로 노출. 긴 문장이나 중요한 정보에는 사용하지 마세요.
StableWCAG AA
기본
tsx
<Tooltip label="설정 열기">
<Button variant="ghost" size="sm" aria-label="설정">
<Info size={16} />
</Button>
</Tooltip>미리보기
툴팁에는 role="tooltip"이 부여되고 트리거에는 aria-describedby가 연결됩니다. 호버뿐 아니라 키보드 포커스 에서도 반드시 노출되어야 합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 표시할 짧은 설명. | |
placement | "top" | "bottom" | "left" | "right" | "top" | 노출 방향. |
children | ReactElement | 트리거가 될 단일 요소. |