Tooltip
설치 확인짧은 설명
1. 목적과 출처
짧은 설명
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/tooltip.tsx- Registry
@adcapsule/tooltip
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| side | 마우스를 올려 보기 |
|---|---|
| top | |
| right | |
| bottom | |
| left |
3. 속성 바꿔 보기
side
4. 설치와 사용
- npm 패키지
- @base-ui/react
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- side·align
- 한 줄 설명만
- 아이콘 버튼의 이름(label)을 대신하지 않는다: label은 따로 넣음
- 여러 툴팁의 지연을 맞출 때 TooltipProvider
공통으로 유지할 토큰
- text.primary (배경, --foreground)
- surface.canvas (글자, --background)
- radius.md (6px)