CSS로 오른쪽 툴팁 설정하기
텍스트나 요소의 오른쪽 방향에 툴팁을 표시하려면 CSS의 left 속성을 활용하면 됩니다. 핵심은 툴팁 요소에 left: 100% 값을 지정하는 것인데, 이렇게 하면 툴팁이 기준 요소의 왼쪽 가장자리에서 시작해 부모 요소 너비만큼 오른쪽으로 이동하게 되어 결과적으로 텍스트 바로 오른쪽에 배치됩니다.
아래 예제 코드를 직접 실행해 보면서 마우스 커서를 텍스트 위에 올렸을 때 오른쪽에 툴팁이 나타나는 동작을 확인해 보세요.
예제 코드
<!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">마우스 커서를 저 위에 올려보세요
<span class = "mytext"> 나의 툴팁 텍스트</span>
</div>
</body>
</html>코드 설명
위 코드의 주요 포인트는 다음과 같습니다.
1. 위치 기준 설정: .mytooltip 클래스에 position: relative;와 display: inline-block;을 적용해 툴팁이 배치될 기준점을 만듭니다.
2. 툴팁 숨김 처리: .mytext에 visibility: hidden;을 지정해 평소에는 툴팁이 보이지 않도록 합니다.
3. 오른쪽 배치: left: 100% 덕분에 툴팁이 텍스트의 오른쪽 끝에서부터 시작되며, top: -6px로 세로 위치를 미세 조정합니다.
4. 호버 시 표시: :hover 선택자로 마우스를 올렸을 때 visibility: visible;이 적용되어 툴팁이 나타납니다.
이 방식은 자바스크립트 없이 순수 CSS만으로 구현되므로 가볍고 성능 부담이 적다는 장점이 있습니다. 필요에 따라 배경색, 모서리 둥글기(border-radius), 패딩 등을 조절해 디자인을 자유롭게 커스터마이징할 수 있습니다.