Tooltip
Tooltip
포인터나 포커스를 통해 컨트롤에 맥락 정보를 제공해 주는 떠 있는 요소(Floating element)예요.
출처: 문서
본문
마우스를 올리거나 키보드 포커스가 가면 주변에 작은 설명 말풍선을 표시해요. 주로 아이콘 버튼처럼 짧은 설명이 필요한 요소에 사용해요.
<Tooltip content="Add to library">
<IconButton radius="full">
<PlusIcon />
</IconButton>
</Tooltip>
이 컴포넌트는 Radix Tooltip primitive의 Root, Portal, Content 파트의 props를 상속받고 병합해요. 공통 margin props도 지원해요.
| Prop | Type | Default |
|---|---|---|
content* |
ReactNode |
No default value |
width |
Responsive<string> |
No default value |
minWidth |
Responsive<string> |
No default value |
maxWidth |
Responsive<string> |
"360px" |
더 알아보기 (Learn more)
- Tooltip의 기본 동작(오픈 딜레이, 위치 등)은 Radix Tooltip primitive 설정을 그대로 따르며, Themes에서 미리 스타일을 입혀 놓은 형태예요.