CSS 툴팁 만들기: JS 없이 마우스 오버 시 말풍선 띄우는 방법 3가지
📋 목차
- CSS 툴팁이란?
- 왜 JS 없이 만들어야 할까?
- 기본 구조 이해하기
- 방법 1 – attribute 활용 툴팁
- 방법 2 – 가상 요소(::after) 툴팁
- 방법 3 – position + opacity 전환 툴팁
- 실전 적용 팁
- 자주 묻는 질문
"CSS 툴팁"은 JavaScript 한 줄 없이도 마우스를 올렸을 때 설명 말풍선을 띄울 수 있는 기술이다. 솔직히 처음 이걸 알았을 때 좀 충격이었다. 그냥 CSS만으로 이게 된다고? 싶었는데, 실제로 해보니 되더라. 오히려 JS로 구현하는 것보다 훨씬 간결하고, 퍼포먼스도 나쁘지 않다.
마치 식당 메뉴판에 작은 별표(*) 하나 달아놓으면 손님이 궁금해서 각주를 보는 것처럼, 툴팁은 UI에서 "부연 설명"을 자연스럽게 전달하는 도구다. 버튼, 아이콘, 링크 옆에 달아두면 사용자 경험이 확 올라간다.
🧩 CSS 툴팁이란?
"CSS 툴팁"이란 HTML 요소에 마우스를 올렸을 때(:hover) 설명 텍스트가 말풍선 형태로 나타났다가 마우스를 치우면 사라지는 UI 요소를 말한다. 기존에는 JavaScript의 mouseover 이벤트나 라이브러리(예: Tippy.js)를 써서 구현했지만, 요즘은 순수 CSS만으로도 충분히 만들 수 있다.
핵심 원리는 단순하다. :hover 선택자와 visibility 또는 opacity 속성 조합이다. 요소에 마우스가 올라가면 숨겨진 말풍선 div가 보이게 바뀌는 구조다.
⚡ 왜 JS 없이 만들어야 할까?
몇 가지 이유가 있다. 첫째, 로딩 속도다. JavaScript를 추가로 파싱하고 실행하는 과정이 없으니 페이지가 그만큼 가볍다. 둘째, 유지보수가 쉽다. CSS 몇 줄이면 되니까 협업할 때도 설명하기 쉽고, 수정도 빠르다. 셋째, 의존성이 없다. 라이브러리 버전 충돌 같은 거 신경 쓸 필요가 없다.
개인적으로는 "간단한 건 항상 CSS로 먼저 해결하자"는 주의다. JS는 정말 CSS로 안 될 때 꺼내는 카드다.
📐 기본 구조 이해하기
"CSS 툴팁"을 만들 때 가장 기본이 되는 구조는 아래와 같다.
<div class="tooltip-wrap">
마우스 올려봐
<span class="tooltip-box">여기가 말풍선!</span>
</div>.tooltip-wrap에 position: relative를 주고, .tooltip-box에 position: absolute를 적용한다. 그리고 기본 상태에서는 opacity: 0, visibility: hidden으로 숨겨두고, .tooltip-wrap:hover .tooltip-box에서 반대로 보이게 바꾼다.
🛠️ 방법 1 – data-tooltip attribute 활용 툴팁
HTML의 data 속성과 CSS의 attr() 함수를 조합하면 가장 깔끔하게 "CSS 툴팁"을 만들 수 있다. HTML에 클래스 하나만 붙이면 되고, 말풍선 내용도 HTML에서 직접 관리할 수 있어서 편하다.
<!-- HTML -->
<button class="tooltip" data-tooltip="저장 완료!">저장</button>/* CSS */
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
white-space: nowrap;
font-size: 13px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}이 방법의 장점은 재사용성이다. 클래스 하나로 어디든 붙여 쓸 수 있고, 내용만 data-tooltip 값으로 바꾸면 된다.
🎯 방법 2 – 가상 요소(::before) 삼각형 화살표 추가
말풍선에 꼬리(화살표)를 달고 싶다면 ::before 가상 요소로 삼각형을 만들면 된다. border를 이용한 CSS 트릭인데, 처음엔 좀 생소하지만 익히면 꽤 유용하다.
.tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
}
.tooltip:hover::before {
opacity: 1;
visibility: visible;
}이렇게 하면 말풍선 아래에 작은 삼각 꼬리가 생긴다. 위치를 왼쪽, 오른쪽, 아래로도 바꿀 수 있다. 방향에 따라 border-top-color 대신 left, right, bottom 방향을 바꿔주면 된다.
🔄 방법 3 – position + opacity 전환 툴팁 (애니메이션 포함)
조금 더 세련된 효과를 원한다면 transform: translateY()와 transition을 함께 써서 슬라이드업 느낌의 "CSS 툴팁"을 만들 수 있다.
.tooltip-box {
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%) translateY(6px);
background: #1a1a2e;
color: #eee;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
}
.tooltip-wrap:hover .tooltip-box {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}pointer-events: none을 꼭 넣어줘야 한다. 안 넣으면 말풍선 자체가 hover 영역에 영향을 줘서 깜빡이는 버그가 생길 수 있다.
✅ 실전 적용 팁
실제로 블로그나 포트폴리오에 "CSS 툴팁"을 달 때 챙겨야 할 것들이 몇 가지 있다.
첫째, 모바일 대응이다. 호버는 터치 디바이스에서 작동 안 한다. 중요한 정보라면 별도로 노출해야 한다.
둘째, z-index 관리다. 다른 요소들과 겹치면 말풍선이 뒤로 숨어버리니 충분히 높은 값을 줘야 한다. 대부분 z-index: 100 정도면 충분하다.
셋째, 텍스트 길이다. 말풍선 내용이 너무 길면 레이아웃이 깨진다. max-width와 white-space: normal을 함께 쓰면 줄바꿈이 자연스럽게 된다.
넷째, 색상 접근성이다. 배경색과 글자색의 대비가 충분해야 가독성이 좋다. #333 배경에 #fff 글자 정도가 무난하다.
❓ 자주 묻는 질문
Q. 툴팁 내용에 HTML 태그를 넣을 수 있나요?
A. data-tooltip 방식에서는 불가능하다. HTML 태그가 포함된 풍부한 툴팁이 필요하다면 별도의 div를 만들어서 구현해야 한다.
Q. 툴팁 방향을 오른쪽이나 왼쪽으로 바꾸고 싶어요.
A. bottom 대신 left나 right 속성을 조정하고, transform 방향도 그에 맞게 바꾸면 된다. 예를 들어 오른쪽으로 내보내려면 left: 110%, top: 50%, transform: translateY(-50%)처럼 설정하면 된다.
Q. IE에서도 작동하나요?
A. IE는 이미 지원 종료가 됐고, attr() 함수와 CSS transition도 IE 구버전에서는 완전히 지원되지 않는다. 2024년 기준으로 IE는 신경 안 써도 된다.
"CSS 툴팁"은 배우는 데 5분도 안 걸리는데 쓸 데가 정말 많다. 아이콘 버튼 설명, 필드 도움말, 약어 풀이 등 작은 UX 포인트를 챙길 수 있다. JS 없이 해결할 수 있다는 게 핵심이다. 한 번 익혀두면 두고두고 쓰게 되는 기술이다.
출처 및 참고
MDN Web Docs – CSS :hover: https://developer.mozilla.org/ko/docs/Web/CSS/:hover
MDN Web Docs – CSS attr(): https://developer.mozilla.org/en-US/docs/Web/CSS/attr
CSS Tricks – Tooltip: https://css-tricks.com/css-tooltip/
W3Schools – How TO - Tooltip: https://www.w3schools.com/howto/howto\_css\_tooltip.asp