개요

호버/포커스 시 보조 정보를 제공하는 경량 힌트입니다.

HTML 구조

<button class="dewp-btn dewp-tooltip" aria-describedby="tip-1">
  저장
  <span id="tip-1" role="tooltip" class="dewp-tooltip-content dewp-tooltip-bottom">설정을 저장합니다</span>
</button>
        

스타일/변형 (코드 예시)

<button class="dewp-btn dewp-tooltip" aria-describedby="tt-default">
  기본
  <span id="tt-default" role="tooltip" class="dewp-tooltip-content dewp-tooltip-bottom">기본 툴팁</span>
</button>

<button class="dewp-btn dewp-btn-primary dewp-tooltip" aria-describedby="tt-primary">
  Primary
  <span id="tt-primary" role="tooltip" class="dewp-tooltip-content dewp-tooltip-bottom">프라이머리 툴팁</span>
</button>

<button class="dewp-btn dewp-btn-secondary dewp-tooltip" aria-describedby="tt-secondary">
  Secondary
  <span id="tt-secondary" role="tooltip" class="dewp-tooltip-content dewp-tooltip-bottom">세컨더리 툴팁</span>
</button>
        

접근성

• aria-describedby로 연결, 콘텐츠는 role="tooltip"
• 키보드 포커스 시에도 표시되도록 구현

위치 클래스

• 아래: .dewp-tooltip-bottom (기본)
• 위: .dewp-tooltip-top
• 왼쪽: .dewp-tooltip-left
• 오른쪽: .dewp-tooltip-right