툴팁
마우스를 올리면 뜨는 짧은 보충 설명. ⚠️ 모바일에서는 열 수 없습니다.
코드
<span class="jt-tooltip">
<button class="jt-icon-btn" aria-describedby="tp1">
<span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/info.svg)" aria-hidden="true"></span>
<span class="jt-sr-only">규격 근거 보기</span>
</button>
<span class="jt-tooltip-body" role="tooltip" id="tp1">화장품 안전기준 제12개정 기준</span>
</span>하지 말 것
- 터치 기기에서도 봐야 하는 설명을 툴팁에 넣지 마세요. hover가 없는 기기에서는 영원히 열리지 않습니다. → 토글팁
- 툴팁 안에 링크나 버튼을 넣지 마세요. 마우스를 옮기는 순간 사라집니다.
접근성
aria-describedby로 대상과 연결- 툴팁 본문에
role="tooltip"
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --jt-tooltip-max
.my-page .jt-tooltip { --jt-tooltip-max: …; }