Components
Tooltips
Overview
툴팁은 요소에 마우스를 올리거나 키보드 포커스가 갔을 때 보조 설명을 표시합니다. 클릭이 필요 없는 짧은 안내에 사용하고, 상호작용이 필요한 콘텐츠는 Popover나 Modal을 사용하세요.
Position
children 기준 상/하/좌/우 4방향을 지원합니다. 화면 경계에 걸리면 반대 방향으로 자동 반전됩니다.
- Top트리거 위쪽에 표시합니다. 기본값입니다.
- Bottom트리거 아래쪽에 표시합니다.
- Left트리거 왼쪽에 표시합니다.
- Right트리거 오른쪽에 표시합니다.
Top
Bottom
Left
Right
Offset
트리거와 툴팁 사이 간격(px)입니다. 기본 8px이며 밀도에 맞게 조절합니다.
offset={4}
offset={8}
offset={16}
Colors
기본은 --surface-inverse / --text-inverse 토큰이며, color · textColor props로 개별 툴팁의 배경·텍스트 색을 바꿀 수 있습니다.
Default
color
color + textColor
기본은 --surface-inverse / --text-inverse이며, color · textColor로 배경과 텍스트 색을 바꿀 수 있습니다. 화살표는 배경색을 따라갑니다.