툴팁
아이콘 버튼의 뜻이나 잘린 텍스트의 짧은 보조 설명처럼, 공간이 부족할 때만 필요한 부가 정보를 보여준다. 핵심 정보나 액션은 툴팁에 숨기지 않는다.
활용 방법
기본
trigger 를 children 으로 감싸고 content 를 전달한다.
Preview
현재 설정의 의미
tsx
<Tooltip content="현재 설정의 의미"><Button>정보</Button></Tooltip>
방향
side 로 top·bottom·left·right 위치를 고른다.
Preview
오른쪽에 표시
tsx
<Tooltip side="right" content="오른쪽에 표시"><Button>오른쪽</Button></Tooltip>
사용 지침
- · 한두 문장 이하의 보조 설명에만 쓴다.
- · 클릭 가능한 메뉴나 복잡한 내용은 Dropdown/Dialog 를 쓴다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| content | ReactNode | - | 툴팁 내용 |
| children | ReactNode | - | trigger |
| side | "top" | "bottom" | "left" | "right" | "top" | 표시 방향 |