속성값을 읽어오는 커스텀 툴팁 (CSS-only Tooltip)
복잡한 HTML 구조나 자바스크립트 없이 툴팁을 띄우는 기법입니다. HTML 태그에
data-tooltip="내용"이라는 커스텀 속성을 달아두고, CSS의 content: attr(data-tooltip) 함수를 사용하여 마우스를 올렸을 때 속성값을 그대로 화면에 말풍선으로 그려냅니다.<div class="tooltip-wrapper">
<span class="custom-tooltip" data-tooltip="자바스크립트 없이 띄웠습니다! 😎">
여기에 마우스를 올려보세요
</span>
</div>