CSS로 상단 툴팁(Top Tooltip) 설정하기
웹 페이지에서 텍스트 위쪽에 툴팁을 표시하려면 CSS의 bottom 속성을 활용하면 됩니다. 툴팁 요소에 bottom: 100%을 지정하면, 툴팁이 기준이 되는 부모 요소의 바로 위에 자동으로 배치됩니다.
동작 원리
- position: relative — 툴팁을 감싸는 부모 요소에 적용해 위치 기준점을 만듭니다.
- position: absolute — 툴팁 본문에 적용해 부모 요소를 기준으로 자유롭게 배치합니다.
- bottom: 100% — 툴팁을 부모 요소의 상단 경계 위쪽으로 이동시킵니다.
- :hover와 visibility — 평소에는 툴팁을 숨겨두고(
visibility: hidden), 마우스를 올리면(:hover) 화면에 표시합니다(visibility: visible).
예제 코드
아래 예제를 실행한 뒤 "마우스 커서를 올려보세요"라는 텍스트 위에 커서를 올리면, 텍스트 상단에 툴팁이 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
bottom: 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">마우스 커서를 올려보세요
<span class = "mytext"> 내 툴팁 텍스트</span>
</div>
</body>
</html>
코드 설명
.mytooltip 클래스는 display: inline-block과 position: relative를 함께 사용해 툴팁이 배치될 기준점 역할을 합니다. margin-top: 50px은 데모 화면에서 툴팁이 위쪽으로 잘리지 않도록 여유 공간을 확보하는 용도입니다.
.mytext는 실제 툴팁 본문입니다. 파란색 배경과 흰색 글자, 둥근 모서리(border-radius)로 스타일링했으며, z-index: 1을 지정해 다른 요소들 위에 표시되도록 했습니다. 또한 left: 60%와 margin-left: -90px의 조합으로 툴팁이 대략 가운데 정렬된 위치에 놓이게 됩니다.
마지막으로 .mytooltip:hover .mytext 선택자 덕분에 마우스를 올리는 순간 visibility 값이 visible로 변경되면서 툴팁이 자연스럽게 나타납니다. JavaScript 없이 CSS만으로 구현할 수 있어 간단한 안내 문구나 추가 정보를 보여줄 때 유용하게 활용할 수 있습니다.