툴팁(tooltip)은 사용자가 특정 텍스트나 요소 위에 마우스 커서를 올렸을 때 화면에 나타나는 작은 안내 창입니다. 추가 정보를 담아 사용자가 내용을 더 쉽게 이해하도록 돕는 UI 요소로, 자바스크립트 없이 CSS만으로도 간단하게 구현할 수 있습니다.
툴팁의 동작 원리
CSS 툴팁의 핵심은 :hover 가상 클래스와 visibility 속성입니다. 기본적으로 툴팁 텍스트는 visibility: hidden;으로 숨겨 두고, 부모 요소에 마우스 커서가 올라오면 visibility: visible;로 변경되어 화면에 표시되는 방식으로 동작합니다.
예제 코드
아래 코드를 실행한 뒤 텍스트 위에 마우스를 올려 보면, 툴팁이 나타나는 것을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<style>
#mytooltip #mytext {
visibility: hidden;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 10px 0;
position: absolute;
z-index: 1;
}
#mytooltip:hover #mytext {
visibility: visible;
}
</style>
<body>
<div id = "mytooltip">Hover the mouse over me
<p id = "mytext">My Tooltip text</p>
</div>
</body>
</html>
코드 설명
#mytooltip #mytext: 툴팁 본문의 기본 스타일을 정의합니다.visibility: hidden;으로 평소에는 숨겨져 있으며, 검정 배경과 흰 글자, 둥근 모서리(border-radius)로 디자인했습니다.position: absolute;와z-index: 1;을 지정해 다른 콘텐츠 위에 떠 있는 형태로 표시됩니다.#mytooltip:hover #mytext: 마우스 커서가#mytooltip영역 위에 올라오면 툴팁의visibility값이visible로 바뀌면서 화면에 나타납니다.
마무리
이처럼 CSS의 :hover 선택자 하나만으로도 별도의 스크립트 없이 툴팁을 손쉽게 구현할 수 있습니다. 여기에 전환 애니메이션(transition)이나 화살표 모양 등을 추가하면 더욱 세련된 툴팁을 만들 수 있습니다.