요소에 추가 설명을 제공하는 팝업 텍스트 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
tooltip 역할 사용
툴팁 텍스트를 담은 요소에 role="tooltip"이 있어야 합니다.
aria-describedby로 연결
트리거 요소에 aria-describedby로 툴팁의 id를 연결해야 합니다.
Escape로 닫기
Escape 키로 툴팁을 닫을 수 있어야 하며 포커스는 이동하지 않아야 합니다.
포커스 시 표시
마우스 호버뿐 아니라 키보드 포커스 시에도 툴팁이 표시되어야 합니다.
툴팁 내 포커스 가능 요소 금지
툴팁에는 링크나 버튼 등 인터랙티브 요소를 포함하면 안 됩니다.
툴팁 위 호버 시 유지
WCAG 1.4.13에 따라 포인터가 툴팁 위로 이동해도 툴팁이 유지되어야 합니다.
짧은 지연 후 표시
우발적 트리거를 방지하기 위해 300–500ms 지연 후 표시하세요.
툴팁 내 인터랙티브 요소 금지
버튼, 링크, 폼 컨트롤은 툴팁이 아닌 dialog 패턴을 사용하세요.
HTML title 속성만 사용 금지
title 속성은 키보드 접근성이 없으며 스크린리더마다 동작이 다릅니다.
enterDelay 설정
enterDelay prop으로 300ms 이상의 지연을 추가해 우발적 표시를 방지하세요.