CSS의 visibility 속성과 :hover 가상 클래스를 활용하면 자바스크립트 없이도 마우스를 올렸을 때 나타나는 툴팁을 간단하게 만들 수 있습니다.
기본 원리는 다음과 같습니다. 툴팁 텍스트를 담은 요소를 평소에는 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>핵심 포인트
- visibility: hidden — 기본 상태에서는 툴팁이 화면에 보이지 않습니다.
- #mytooltip:hover #mytext — 부모 요소에 마우스를 올리면 자식인 툴팁 텍스트가 표시됩니다.
- position: absolute와 z-index: 1 — 툴팁이 주변 콘텐츠 위에 겹쳐 나타나도록 위치를 제어합니다.
이처럼 순수 CSS만으로도 간단한 툴팁을 손쉽게 구현할 수 있으며, 배경색·모서리 둥글기·여백 등의 스타일 값을 조절해 디자인을 자유롭게 커스터마이징할 수 있습니다.