텍스트나 요소의 왼쪽에 툴팁을 표시하려면 CSS의 right 속성을 사용해야 합니다. 툴팁을 기준 요소의 왼쪽 바깥쪽에 배치하려면 right: 100%으로 설정하면 되는데, 이는 툴팁의 오른쪽 가장자리가 부모 요소의 왼쪽 가장자리에 맞춰지도록 하는 값입니다.
왼쪽 툴팁 구현 예제
아래 코드를 실행하면 마우스 커서를 텍스트 위에 올렸을 때 왼쪽 방향으로 툴팁이 나타납니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: orange;
color: white;
z-index: 1;
top: -6px;
right: 100%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">마우스 커서를 올려보세요
<span class = "mytext"> 나의 툴팁 텍스트</span>
</div>
</body>
</html>코드 동작 원리
- position: relative — 툴팁 컨테이너(
.mytooltip)에 상대 위치를 지정하여 내부 툴팁이 이를 기준으로 배치되도록 합니다. - position: absolute + right: 100% — 툴팁 본문(
.mytext)을 절대 위치로 지정하고right: 100%값을 적용해 컨테이너의 왼쪽 바깥쪽에 배치합니다. - visibility: hidden / visible — 평소에는 툴팁을 숨기고,
:hover시에만 화면에 표시됩니다. - z-index: 1 — 툴팁이 다른 요소 위에 겹쳐 보이도록 쌓임 순서를 높입니다.
이처럼 right 속성의 백분율 값을 조절하면 툴팁이 나타나는 방향과 간격을 손쉽게 변경할 수 있습니다.