CSS만으로 툴팁(Tooltip) 만들기 – 단계별 구현 가이드

툴팁(tooltip)은 추가 정보를 표시하는 작은 팝업 상자입니다. 방문자가 마우스 포인터를 특정 요소 위에 올리면 화면에 나타나며, 버튼이나 링크의 기능을 설명하거나 보조 안내를 제공할 때 유용하게 사용됩니다.

자바스크립트 없이 순수 CSS만으로도 간단하게 툴팁을 구현할 수 있습니다. 핵심은 position, visibility 속성과 :hover 가상 클래스를 조합하는 것입니다.

CSS 툴팁 예제 코드

다음은 CSS를 사용하여 툴팁을 만드는 전체 코드입니다.

<!DOCTYPE html>
<html>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}
.toolTip {
    position: relative;
    display: inline-block;
    border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
    visibility: hidden;
    width: 160px;
    background-color: #721cd4;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    top: -35px;
    left: -10px;
    z-index: 1;
}
.toolTip:hover .toolText {
    visibility: visible;
}
</style>
<body>
<h1>Css tooltip example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip</h2>
</body>
</html>

코드 핵심 포인트

.toolTip – position: relative;를 설정해 툴팁이 이 요소를 기준으로 배치되도록 하며, border-bottom으로 점선 밑줄을 표시해 마우스를 올려볼 수 있는 영역임을 알려줍니다.
.toolText – 기본적으로 visibility: hidden;으로 숨겨져 있으며, position: absolute;와 top, left 값으로 부모 요소 위쪽에 위치합니다.
:hover – 마우스가 올라오면 visibility: visible;이 적용되어 툴팁이 나타납니다.

출력 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

CSS만으로 툴팁(Tooltip) 만들기 – 단계별 구현 가이드

마우스를 “Hover over me” 텍스트 위에 올리면 보라색 툴팁이 표시됩니다.

CSS만으로 툴팁(Tooltip) 만들기 – 단계별 구현 가이드

이처럼 CSS의 :hover와 visibility 속성만 활용하면 자바스크립트 없이도 깔끔한 툴팁을 손쉽게 구현할 수 있습니다. 필요에 따라 배경색, 크기, 위치 값을 조정해 원하는 디자인으로 커스터마이징해 보세요.