💬 CSS 전용 툴팁 (Tooltip with attr)

복잡한 HTML 구조나 자바스크립트 이벤트 리스너 없이 아주 깔끔하게 툴팁을 띄우는 기법입니다.

HTML 태그에 data-tooltip="내용"이라는 커스텀 속성을 달아두고, CSS의 content: attr(data-tooltip) 함수를 사용하여 가상 요소(::after)에 해당 속성값을 그대로 불러옵니다. 호버 시 opacity와 visibility를 조절하면 멋진 말풍선 애니메이션이 완성됩니다.