CSS로 툴팁(tooltip) 오른쪽에 화살표 추가하기
툴팁은 사용자가 특정 요소 위에 마우스 커서를 올렸을 때 간단한 안내 문구를 보여주는 유용한 UI 요소입니다. CSS만으로도 툴팁을 구현할 수 있으며, left 속성과 :after 가상 요소를 활용하면 툴팁 옆에 방향을 가리키는 화살표까지 손쉽게 추가할 수 있습니다.
동작 원리
화살표는 툴팁 본문에 :after 가상 요소를 붙인 뒤, 두께가 있는 border 중 한쪽 면에만 색상을 지정하는 방식으로 만듭니다. 나머지 세 면은 transparent(투명)로 처리하면 삼각형 모양의 화살표가 완성됩니다. 이때 left: 100%를 지정하면 화살표가 툴팁의 오른쪽 바깥쪽에 배치됩니다.
예제 코드
아래 코드를 실행한 뒤 텍스트 위에 마우스 커서를 올려보세요. 오른쪽에 화살표가 달린 파란색 툴팁이 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -5px;
right: 110%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent blue;
}
.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으로 숨겨져 있다가, 마우스를 올리면 화면에 나타납니다. - .mytext:after —
border-color: transparent transparent transparent blue처럼 왼쪽 면에만 색상을 지정해 오른쪽을 향하는 삼각형 화살표를 만들고,left: 100%로 툴팁 오른쪽에 배치합니다. - :hover — 마우스 커서가 요소 위에 있을 때만 툴팁이 보이도록 제어합니다.