툴팁(tooltip)은 마우스 커서를 요소 위에 올렸을 때 추가 정보를 보여주는 유용한 UI 요소입니다. 여기에 화살표를 함께 표시하면 툴팁이 어떤 요소를 가리키는지 시각적으로 훨씬 명확하게 전달할 수 있습니다.
CSS로 툴팁 왼쪽 화살표 만들기
툴팁 왼쪽에 화살표를 추가하려면 CSS의 border 속성과 :after 가상 요소를 활용합니다. 먼저 툴팁 본문이 기준 요소의 오른쪽(left: 110%)에 나타나도록 위치를 지정하고, 화살표는 툴팁의 왼쪽 가장자리(right: 100%)에 배치합니다.
동작 원리 핵심 정리
visibility: hidden으로 툴팁을 평소에는 숨기고, 마우스 오버(hover) 시visible로 전환해 표시합니다.:after가상 요소에 네 방향의 테두리를 설정하고, 필요한 방향만 색을 지정해 삼각형 화살표를 만듭니다.border-color: transparent blue transparent transparent;처럼 왼쪽 테두리만 파란색으로 두면 툴팁의 왼쪽을 가리키는 화살표가 완성됩니다.
예제 코드
아래 코드를 실행하면 마우스 커서를 올렸을 때 왼쪽에 화살표가 달린 툴팁이 나타납니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -5px;
left: 110%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 50px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent blue transparent transparent;
}
.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>이처럼 테두리 색상의 방향만 바꾸면 화살표의 위치(위·아래·오른쪽)도 자유롭게 조정할 수 있으니, 다양한 툴팁 디자인에 응용해 보세요.