Tooltip
호버하면 요소의 짧은 설명을 띄워요. 기본은 요소 위 8px 이에요.
Anatomy
- 01Container블러 반투명 말풍선. radius 6px, padding 6px 10px, 트리거에서 8px 간격
- 02Text12px / white 보조 설명. max-width 200px 초과 시 줄바꿈
- 03Arrow (선택)5px 삼각형, 컨테이너와 같은 색. 트리거와의 관계가 불분명할 때만
Properties
Position
기본은 Top 이에요. 가장자리에 가려지면 반대 방향으로 자동 전환해요.
Base
트리거와 8px 떨어져 떠요. 시각적 여유를 주고, 마우스가 지나갈 때 잘못 닫히는 걸 막아요.
Case
화살표는 트리거와의 관계가 불분명할 때만 붙여요.
Arrow (관계가 불분명할 때)
Arrow 없음 (관계가 명확할 때)
Guidelines
✓ DO
- 아이콘 버튼처럼 레이블 없는 요소에
- 텍스트는 1~2줄로 짧게
- 보조 정보만. 핵심 정보는 화면에 항상 노출
- 연속 호버는 Cascade 로 바로 표시
✗ DON'T
- 링크·버튼 같은 인터랙션 콘텐츠를 안에 넣기
- 모바일 전용 UI(호버 없음)
- 에러·경고 전달(Toast 몫)
- 긴 설명(Popup 몫)
노출 정책
1. Default
| 항목 | 값 | 사용 근거 |
|---|---|---|
| 표시 지연 (show) | 600ms | 의도적 멈춤과 우연한 통과를 구분하는 임계점 |
| 숨김 지연 (hide) | 0ms | 마우스가 벗어나면 즉시 사라짐 |
| 페이드 인 시간 | 150ms (ease-out) | 자연스러운 등장 |
| 페이드 아웃 시간 | 100ms (ease-in) | 깔끔한 퇴장 |
2. Cascade (연속 호버)
툴팁을 하나 봤으면 탐색 중으로 보고 다음 툴팁은 바로 띄워요.
| 상태 | 표시 지연 |
|---|---|
| 첫 호버 (idle → Hover) | 600ms |
| 연속 호버 (이미 툴팁 본 후) | 100ms |
| 케스케이드 리셋 | 무호버 1,500ms 이상 경과 시 다시 600ms |
Specification
Container
| 속성 | 값 | 설명 |
|---|---|---|
| background | rgba(44,44,44,0.78) | 블러 + 반투명 |
| backdrop-filter | blur(16px) | |
| border-radius | --radius-xs (6px) | |
| padding | 6px 10px | |
| offset (기본) | 8px | 트리거 요소 상단에서 8px 간격 |
| box-shadow | 0 2px 8px rgba(0,0,0,0.2) | |
| arrow size | 5px triangle | 같은 배경색 적용 |
Typography
| 속성 | 값 | 설명 |
|---|---|---|
| font-size | 12px | |
| font-weight | 500 (Medium) | |
| color | --color-static-white (#ffffff) | |
| max-width | 200px | 초과 시 줄바꿈 |
Animation
| 속성 | 값 | 설명 |
|---|---|---|
| show delay | 600ms | 첫 호버 기준 |
| show delay (cascade) | 100ms | 연속 호버 시 |
| hide delay | 0ms | 즉시 숨김 |
| fade-in | 150ms ease-out | |
| fade-out | 100ms ease-in | |
| cascade reset | 무호버 1,500ms 경과 | 이후 다시 600ms |
설치
npm i @polarisoffice/pds-reactPosition
기본은 top. 화면 가장자리에 가려지면 자동으로 반대 방향으로 fallback 해요.
import { Tooltip, IconButton } from '@polarisoffice/pds-react';
<Tooltip content="Text" placement="top"><IconButton /></Tooltip>
<Tooltip content="Text" placement="bottom"><IconButton /></Tooltip>
<Tooltip content="Text" placement="left"><IconButton /></Tooltip>
<Tooltip content="Text" placement="right"><IconButton /></Tooltip>Arrow
트리거와의 관계가 불분명할 때만 화살표를 붙여요.
import { Tooltip, IconButton } from '@polarisoffice/pds-react';
<Tooltip content="저장" arrow><IconButton icon="save" /></Tooltip>
<Tooltip content="공유"><IconButton icon="share" /></Tooltip>Timing
첫 호버 600ms, 연속 호버 100ms, 1,500ms 쉬면 리셋. 보통 건드리지 않아요.
import { Tooltip, IconButton } from '@polarisoffice/pds-react';
<Tooltip content="Text" showDelay={600} hideDelay={0}>
<IconButton />
</Tooltip>