툴팁(tooltip)의 상단에 화살표를 추가하려면 CSS의 bottom 속성을 활용하면 됩니다. 화살표는 :after 가상 요소와 테두리(border) 기법을 조합하여 만들 수 있습니다.
핵심 원리
화살표는 실제 이미지가 아니라 CSS 테두리만으로 구성됩니다. 네 방향 중 세 방향의 테두리 색상을 transparent로 지정하고, 원하는 방향(여기서는 아래쪽)에만 색상을 적용하면 삼각형 모양의 화살표가 만들어집니다.
예제
아래 코드를 실행하면 마우스 커서를 올렸을 때 상단에 화살표가 달린 툴팁이 나타납니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 3px;
border-style: solid;
border-color: transparent transparent blue 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>코드 설명
- .mytooltip:
position: relative;가 설정되어 있어 내부의 툴팁 텍스트가 이 요소를 기준으로 배치됩니다. - .mytext: 기본적으로
visibility: hidden;으로 숨겨져 있다가, 마우스를 올리면(:hover) 화면에 나타납니다. - :after 가상 요소:
bottom: 100%;로 툴팁 박스 바로 위에 위치시키고, 아래쪽 테두리만 파란색으로 채워 위를 향하는 화살표를 만듭니다.
이처럼 bottom 속성과 가상 요소를 활용하면 별도의 이미지나 JavaScript 없이도 순수 CSS만으로 툴팁 화살표를 간편하게 구현할 수 있습니다.