Tooltip
아이콘만 있는 버튼의 이름을 보여 줘요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
설정
사용법
- 중요한 정보는 넣지 않아요클릭할 요소도 넣지 않아요. Tooltip이 있어도 aria-label은 따로 달아요.
- 나타나는 시간마우스는 600ms 뒤, 키보드 포커스는 바로 보여요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| content | 보여 줄 문구 | — |
| children | 대상 요소 (보통 icon 버튼) | — |
코드
tsx
<Tooltip content="설정">
<Button size="icon-md" variant="ghost" aria-label="설정"><Settings /></Button>
</Tooltip>