웹 페이지에서 툴팁(tooltip)을 원하는 위치에 정확하게 표시하려면 CSS의 right, left, top, bottom 속성을 적절히 조합해 사용해야 합니다. 이 네 가지 속성은 툴팁이 기준 요소를 중심으로 어느 방향에 나타날지 결정하는 핵심 역할을 합니다.
툴팁 위치 지정의 기본 원리
툴팁을 자유롭게 배치하려면 두 가지 전제 조건이 필요합니다. 먼저 부모 요소에는 position: relative를 설정해 기준점을 만들고, 툴팁 본체에는 position: absolute를 적용해 부모를 기준으로 움직이도록 해야 합니다. 그런 다음 top, bottom, left, right 값으로 세부 위치를 조정합니다.
오른쪽에 툴팁 배치하기
가장 많이 쓰이는 형태는 마우스 커서를 요소 위에 올렸을 때 툴팁이 오른쪽에 나타나는 방식입니다. 아래 예제를 통해 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -6px;
left: 100%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
}
.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>코드 핵심 포인트
- .mytooltip:
position: relative와display: inline-block을 지정해 툴팁의 기준점이 되는 부모 컨테이너 역할을 합니다. - .mytext:
visibility: hidden으로 평소에는 숨겨져 있으며,position: absolute와left: 100%덕분에 부모 요소 바로 오른쪽에 배치됩니다. - top: -6px: 툴팁을 약간 위로 올려 부모 텍스트와 수직 중앙선을 맞추는 미세 조정입니다.
- :hover: 마우스 커서를 올리면
visibility: visible이 적용되어 툴팁이 화면에 나타납니다.
같은 원리로 right: 100%를 사용하면 왼쪽, bottom: 100%을 사용하면 위쪽, top: 100%을 사용하면 아래쪽에도 툴팁을 손쉽게 배치할 수 있습니다. 상황에 맞게 값을 조절해 다양한 방향의 툴팁을 구현해 보세요.