툴팁
hover나 focus 때 짧은 보조 설명을 띄우는 보조 레이어다. 라벨만으로 부족한 아이콘 버튼이나 축약 값에 맥락을 더한다.
상태
위쪽 설명
top아래쪽 설명
bottom오른쪽 설명
right말풍선은 hover나 키보드 focus 때만 나타난다.
활용 방법
아이콘 보강
children이 트리거, content가 말풍선이다. side로 방향을 정한다.
Preview
승인 후에는 되돌릴 수 없다.
tsx
<Tooltip content="도움말"><Button>Info</Button></Tooltip>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| content | ReactNode | - | 말풍선 내용 |
| children | ReactNode | - | 트리거 요소 |
| side | "top" | "bottom" | "left" | "right" | "top" | 표시 방향 |
| className | string | - | 래퍼 클래스 |