Components - Tooltip

comment

  • 기본 사용: data-tooltip 속성에 툴팁 텍스트를 지정하면 마우스 호버 또는 포커스 시 툴팁이 자동으로 표시
  • 적용 대상: 버튼, 링크, 아이콘 등 모든 HTML 요소에 적용 가능. 주로 아이콘 버튼(ui-icon-button)에 사용
  • 툴팁 비활성화: data-tooltip-disabled 속성을 추가하면 해당 요소의 툴팁 표시 안 됨
  • 표시/숨김 딜레이: 마우스 호버 후 500ms 후에 툴팁 표시, 마우스 아웃 후 150ms 후에 툴팁 제거
  • 자동 위치 조정: 화면 밖으로 나가지 않도록 툴팁 위치 자동 조정
  • 동적 위치 업데이트: 스크롤 또는 윈도우 리사이즈 시 툴팁 위치 자동 재조정
  • JavaScript 초기화: initTooltips() 함수를 호출하여 툴팁 기능 활성화. 페이지 로드 시 자동으로 초기화되거나 수동으로 호출 가능
  • 접근성: 툴팁 표시 시 aria-describedby 속성이 자동으로 추가되어 접근성 향상. 아이콘 버튼의 경우 aria-label 속성도 함께 사용 권장
  • 키보드 지원: 포커스 시에도 툴팁 표시되어 키보드 사용자 지원
Tooltip - Icon Button
HTML 구조
<button type="button" class="ui-icon-button ui-icon-button--copy" data-tooltip="복사" aria-label="복사"></button>
Tooltip - 일반 요소
HTML 구조
<button type="button" class="ui-button ui-button--primary" data-tooltip="저장 버튼">저장</button>
<a href="#" data-tooltip="더 자세한 정보를 보려면 클릭하세요">링크</a>
<span data-tooltip="이 텍스트에 마우스를 올려보세요">호버해보세요</span>
Tooltip - 정보 아이콘
HTML 구조
<span>DMP 광고그룹 조회</span>
<span
  class="ui-tooltip-info"
  data-tooltip="DMP 광고그룹 조회는 월 단위로 조회할 수 있습니다."
  aria-label="DMP 광고그룹 조회"
></span>