툴팁(Tooltip)은 사용자가 특정 요소에 마우스를 올렸을 때 추가 정보를 보여주는 작은 팝업 상자입니다. 자바스크립트 없이 CSS만으로도 손쉽게 구현할 수 있으며, :hover 선택자와 opacity, visibility 속성을 활용하면 부드러운 전환 효과까지 적용할 수 있습니다.
CSS 툴팁의 핵심 원리
CSS 툴팁은 크게 세 가지 요소로 구성됩니다.
- .tooltip — 툴팁이 붙을 기준 요소로,
position: relative;를 지정해 기준점 역할을 합니다. - .toolText — 실제로 화면에 나타나는 말풍선으로, 평소에는 숨겨져 있다가 호버 시 표시됩니다.
- ::after 가상 요소 — 말풍선 아래의 삼각형 화살표(꼬리)를 그려줍니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
font-size: 20px;
font-weight: bolder;
color: blue;
}
.tooltip .toolText {
visibility: hidden;
width: 120px;
background-color: rgb(89, 166, 255);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px 20px;
font-weight: normal;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .toolText::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .toolText {
visibility: visible;
opacity: 1;
}
</style>
<body>
<h1>Tooltip Example</h1>
<div class="tooltip">
Hover Here
<span class="toolText">Some Random Text</span>
</div>
<p>Hover over the above text to see tooltip in action</p>
</body>
</html>주요 코드 설명
1. 툴팁 위치 잡기
.toolText에 position: absolute;와 bottom: 125%;를 지정하면 텍스트 위쪽에 말풍선이 나타납니다. left: 50%와 음수 마진(margin-left: -60px)을 조합해 말풍선을 가로 방향 중앙에 정렬합니다.
2. 화살표(꼬리) 만들기
::after 가상 요소에 네 방향 테두리 색상을 다르게 지정하면 삼각형 모양이 만들어집니다. 위쪽에만 색상(#555)을 주고 나머지는 투명하게 처리해 아래를 가리키는 화살표를 구현한 것입니다.
3. 부드러운 등장 효과
평소에는 opacity: 0;과 visibility: hidden;으로 숨겨두고, 마우스를 올리면 :hover에 의해 opacity: 1;과 visibility: visible;로 변경됩니다. transition: opacity 0.3s; 덕분에 0.3초 동안 서서히 나타나는 자연스러운 애니메이션이 연출됩니다.
실행 결과
위 코드를 실행하면 파란색 점선 밑줄이 있는 텍스트가 화면에 표시됩니다.
해당 텍스트에 마우스를 올리면(Hover) 위쪽으로 말풍선 툴팁이 부드럽게 나타납니다.
마무리
이처럼 CSS의 :hover와 가상 요소만 활용해도 별도의 라이브러리나 자바스크립트 없이 세련된 툴팁을 만들 수 있습니다. bottom 값을 조절해 말풍선 위치를 아래·좌·우로 바꾸거나, 배경색과 폰트 스타일을 변경해 사이트 분위기에 맞게 커스터마이징해 보세요.