웹 페이지에서 마우스를 요소 위에 올렸을 때 툴팁이 갑자기 나타나는 것보다 서서히 부드럽게 페이드 인되는 것이 훨씬 세련된 사용자 경험을 제공합니다. CSS의 opacity 속성과 transition 속성을 조합하면 자바스크립트 없이도 이러한 효과를 쉽게 구현할 수 있습니다.
핵심 원리
페이드 인 툴팁의 핵심은 다음 두 가지 속성입니다.
- opacity: 기본값을
0(완전히 투명)으로 설정하고, 마우스 오버 시1(불투명)로 변경합니다. - transition:
opacity 1s처럼 지속 시간을 지정하여 색상 변화가 즉각적이지 않고 1초에 걸쳐 점진적으로 일어나도록 만듭니다.
또한 visibility: hidden을 함께 사용하면 화면 판독기(screen reader)에서 툴팁이 숨겨지므로 접근성 측면에서도 유리합니다.
전체 예제 코드
아래 코드를 실행하면 마우스 커서를 텍스트 위에 올릴 때 툴팁이 왼쪽 방향으로 부드럽게 페이드 인됩니다.
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -5px;
right: 110%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
opacity: 0;
transition: opacity 1s;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent blue;
}
.mytooltip:hover .mytext {
visibility: visible;
opacity: 1;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>코드 설명
1. 툴팁 본체 스타일 (.mytext)
툴팁은 position: absolute로 배치되며, right: 110% 덕분에 기준 요소의 왼쪽 바깥쪽에 나타납니다. 처음에는 visibility: hidden과 opacity: 0 상태로 완전히 숨겨져 있다가, transition: opacity 1s 덕분에 나타날 때 1초 동안 서서히 밝아집니다.
2. 화살표(꼬리) 스타일 (:after)
:after 가상 요소와 투명한 테두리(border) 기법을 활용해 툴팁 옆에 삼각형 모양의 화살표를 만들어, 툴팁이 어떤 요소를 가리키는지 시각적으로 알려줍니다.
3. 호버 효과 (:hover)
.mytooltip:hover .mytext 선택자는 마우스 커서가 툴팁 영역 위에 올라온 순간 visibility와 opacity 값을 변경하여 페이드 인 애니메이션을 시작합니다.
활용 팁
- 애니메이션 속도 조절:
transition: opacity 1s에서1s값을0.3s,0.5s등으로 바꾸면 원하는 속도로 조정할 수 있습니다. - 부드러운 가속 곡선:
transition: opacity 1s ease-in-out처럼 타이밍 함수를 추가하면 더욱 자연스러운 움직임을 연출할 수 있습니다. - 위치 변경: 툴팁을 오른쪽, 위, 아래에 표시하고 싶다면
top,left,bottom값과 화살표의border-color방향만 수정하면 됩니다.
CSS만으로 구현하는 페이드 인 툴팁은 외부 라이브러리 없이 가볍고 빠르게 동작하므로, 간단한 안내 문구나 추가 정보를 보여줄 때 매우 유용한 기법입니다.