Tooltip
마우스 오버 또는 키보드 포커스 시 추가 정보를 제공하는 팝오버 컴포넌트입니다. KRDS 2.2 접근성 가이드라인을 준수합니다.
개요
설치
사용법
Tooltip은 자식 요소에 마우스를 올리거나 키보드로 포커스할 때 간단한 도움말을 표시합니다.
예제
Position
position prop으로 툴팁의 위치를 지정할 수 있습니다.
Delay
delay prop으로 툴팁이 나타나는 지연 시간을 밀리초 단위로 설정할 수 있습니다. 기본값은 200ms입니다.
아이콘 버튼과 함께 사용
텍스트 레이블이 없는 아이콘 버튼의 기능을 설명할 때 툴팁을 사용하세요.
Disabled
disabled prop으로 툴팁을 비활성화할 수 있습니다.
접근성
WCAG 2.1 / KWCAG 2.2 AA 기준 및 KRDS 2.2 접근성 가이드라인을 준수합니다.
키보드 지원
| 키 | 동작 |
|---|---|
Tab | 버튼에 포커스하면 툴팁 표시 |
Shift + Tab | 포커스 이동 시 툴팁 숨김 |
ESC | 툴팁 닫기 및 활성화 버튼으로 포커스 복원 |
ARIA 속성
aria-describedby: 활성화 요소와 툴팁 콘텐츠 자동 연결 (추가 설명 제공)role="tooltip": 툴팁 역할 명시- 충분한 명암비 (다크 배경과 흰색 텍스트로 7:1 이상 보장)