← 목록으로
툴팁 컴포넌트
기본 툴팁 (4방향)
버튼에 마우스를 올리면 툴팁이 표시됩니다. 200ms 딜레이 후 나타나며, 키보드 포커스에도 동작합니다.
긴 텍스트 툴팁
긴 텍스트도 max-width 240px 내에서 자동으로 줄바꿈됩니다.
아이콘 버튼 툴팁
아이콘만 있는 버튼에 툴팁을 추가하여 기능을 설명할 수 있습니다.
16. 툴팁 컴포넌트
Design a tooltip system:
**Trigger Behavior**:
- Hover: show after 200ms delay, hide immediately on leave
- Focus: show on focus, hide on blur
- Touch: show on long-press, hide on tap outside
**Tooltip Panel**:
- Background: gray-900 (dark theme)
- Text: white, 13px
- Padding: 8px 12px
- Border-radius: 6px
- Max-width: 240px
- Arrow: 8px pointing to trigger
**Positioning**:
- Configurable: top, bottom, left, right
- Auto-flip when near viewport edge
- 8px offset from trigger
- Arrow centered on trigger
**Variants**:
- Simple: text only
- Rich: with title + description
- Interactive: can hover into tooltip (for links)
**Animation**:
- Fade + slight scale from 95%
- Duration: 100ms ease-out
- Transform origin: from arrow direction
**Content Types**:
- Plain text string
- JSX for rich content
- Keyboard shortcut badges
**Accessibility**:
- role="tooltip"
- aria-describedby linking
- Not announced on hover (visual only)
Tech: React + @floating-ui/react + Framer Motion1