툴팁
hover나 focus 때 짧은 보조 설명을 glass 톤으로 띄우는 표시다. 라벨만으로 부족한 아이콘 버튼이나 축약된 값에 맥락을 덧붙인다.
상태
위쪽에 표시된다
top아래쪽에 표시된다
bottom왼쪽에 표시된다
left오른쪽에 표시된다
right활용 방법
아이콘 버튼 설명
아이콘만으로 뜻이 모호한 트리거에 맥락을 더한다. 버튼에 마우스를 올리면 툴팁이 나타난다.
Preview
현재 세션을 저장한다
tsx
<Tooltip content="현재 세션을 저장한다"><Button icon={<Info size={13} />}>도움말</Button></Tooltip>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| content | ReactNode | - | 툴팁 내용 |
| children | ReactNode | - | 트리거 요소 |
| side | "top" | "bottom" | "left" | "right" | "top" | 표시 방향 |
| className | string | - | 래퍼 클래스 |