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 → 하단 정렬