Tooltip
툴팁은 대상 요소의 좌측 하단에 기본 정렬됩니다.
화면 공간이 부족한 경우에는 자동으로
우측 정렬 → 가운데 정렬 → 뷰포트 중앙 정렬 순서로 보정됩니다.
툴팁은 DOM에 미리 생성되며, 각 요소는 aria-describedby 속성을 통해 해당 툴팁과 연결됩니다.
툴팁은 마우스 오버, 포커스, 터치 이벤트로 표시되며,
외부 영역 클릭, 포커스 아웃, 스크롤 시 자동으로 닫힙니다.
내부에서 스크롤하거나 마우스를 유지하는 경우에는 툴팁이 닫히지 않도록 처리됩니다.
툴팁이 중복으로 열리지 않도록 하나의 툴팁만 활성 상태를 유지합니다.
Anatomy
|
툴팁은 대상 요소의 좌측 하단에 기본 정렬됩니다. |
Direction × Alignment Examples
Top · Align Left
data-tooltip-direction="top" data-tooltip-align="start"
Top · Align Center
align="center"
Top · Align Right
align="end"
Bottom · Align Left
기본값 권장: bottom + start
Bottom · Align Center
align="center"
Bottom · Align Right
align="end"
Left · Align Top
left + start → 상단 정렬
Left · Align Center
left + center → 수직 중앙
Left · Align Bottom
left + end → 하단 정렬
Right · Align Top
right + start → 상단 정렬
Right · Align Center
right + center → 수직 중앙
Right · Align Bottom
right + end → 하단 정렬