CSS로 툴팁에 화살표 추가하기
CSS의 :after 가상 요소를 활용하면 툴팁 말미에 작은 화살표(꼬리 모양)를 간단히 추가할 수 있습니다. 이때 content 속성을 반드시 함께 지정해야 하며, 테두리(border)를 조합해 삼각형 형태의 화살표를 만드는 방식이 일반적으로 사용됩니다.
화살표가 자연스럽게 보이려면 툴팁 본문과 같은 색상으로 위쪽 테두리만 채우고, 나머지 방향은 투명(transparent) 처리하는 것이 핵심입니다.
예제 코드
아래 예제는 마우스 커서를 올리면 툴팁이 나타나고, 툴팁 아래쪽에 파란색 화살표가 함께 표시되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
bottom: 100%;
left: 60%;
margin-left: -90px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-top: 50px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 7px;
border-style: solid;
border-color: blue transparent 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>코드 설명
- .mytext:after: 툴팁 텍스트 뒤에 빈 콘텐츠(
content: "")를 생성해 화살표 역할을 하는 요소를 만듭니다. - border-width와 border-style: 네 방향의 테두리 두께를 7px로 설정하고 solid 스타일을 적용해 삼각형을 형성합니다.
- border-color: 위쪽만 파란색으로 채우고 나머지 세 방향은 투명하게 처리해 아래를 향하는 화살표 모양을 완성합니다.
- :hover: 마우스 커서를 올렸을 때
visibility속성으로 툴팁과 화살표를 함께 표시합니다.
이처럼 :after 가상 요소와 테두리 기법만 활용하면 이미지 파일 없이도 순수 CSS만으로 깔끔한 화살표 툴팁을 구현할 수 있습니다.