웹 페이지에서 마우스 커서를 올렸을 때 요소 아래쪽에 나타나는 하단 툴팁(bottom tooltip)은 CSS의 top 속성만으로 간단하게 구현할 수 있습니다.
핵심은 툴팁 요소에 top: 100% 값을 지정하는 것입니다. 이렇게 하면 툴팁이 부모 요소의 바로 아래에 배치됩니다. 반대로 상단 툴팁을 만들고 싶다면 bottom: 100%을 사용하면 됩니다.
CSS 하단 툴팁 예제
아래 예제 코드를 실행하고 텍스트 위에 마우스 커서를 올려보세요. 하단에 주황색 툴팁이 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: orange;
color: white;
z-index: 1;
top: 100%;
left: 60%;
margin-left: -90px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-top: 50px;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>코드 동작 원리
- visibility: hidden; — 기본 상태에서는 툴팁이 화면에 보이지 않습니다.
- top: 100%; — 툴팁을 부모 요소 기준으로 아래쪽에 배치하여 하단 툴팁을 만듭니다.
- position: relative / absolute; — 부모 요소에 relative, 툴팁에 absolute를 지정해 텍스트를 기준으로 툴팁이 위치하도록 합니다.
- :hover 선택자 — 마우스 커서를 올리면 visibility가 visible로 변경되어 툴팁이 나타납니다.
이처럼 CSS만으로 자바스크립트 없이도 간단한 하단 툴팁 효과를 손쉽게 만들 수 있습니다.