html&css
html, css 만으로 tooltip 커스텀
현박이
2025. 6. 5. 10:25
반응형
html 코드
<div class="container">
<div class="inner-container">
<div class="tooltip">Hover Me (LEFT) <span class="tooltiptext tooltip-left">왼쪽 툴팁</span></div>
<br><br>
<div class="tooltip">Hover Me (RIGHT) <span class="tooltiptext tooltip-right">오른쪽 툴팁</span></div>
<br><br>
<button class="tooltip">Hover Me (TOP) <span class="tooltiptext tooltip-top">위쪽 툴팁</span></button>
<br><br>
<button class="tooltip">Hover Me (BOTTOM) <span class="tooltiptext tooltip-bottom">아래쪽 툴팁</span></button>
</div>
</div>
css 코드
/* 컨테이너 설정 */
.container {display:flex;justify-content:center; flex-direction: row;}
.inner-container {display:flex;flex-direction: column;width: 200px;text-align:center;margin-top:50px}
/* 툴팁 기본 스타일 설정 시작 */
.tooltip {
position: relative;
display: block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* -------------------------- */
/* 툴팁 화살표 기본 스타일 설정 시작 */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
/* 툴팁 방향 설정 시작 */
/* 왼쪽 툴팁 시작 */
.tooltip .tooltip-left {
top: -5px;
right: 105%;
}
.tooltip .tooltip-left::after {
top: 50%;
left: 100%;
margin-top: -5px;
border-color: transparent transparent transparent black;
}
/* 오른쪽 툴팁 시작 */
.tooltip .tooltip-right {
top: -5px;
left: 105%;
}
.tooltip .tooltip-right::after {
top: 50%;
right: 100%;
margin-top: -5px;
border-color: transparent black transparent transparent;
}
/* 위쪽 툴팁 시작 */
.tooltip .tooltip-top {
width: 120px;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltip-top::after {
top: 100%;
left: 50%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
/* 아래쪽 툴팁 시작 */
.tooltip .tooltip-bottom {
width: 120px;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltip-bottom::after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-color: transparent transparent black transparent;
}
/* 툴팁 방향 설정 끝 */
툴팁 화살표 설정
툴팁에 화살표를 추가해주기 위해서는 가상 요소인 ::after 속성을 사용해야한다.
::after 속성은 해당 엘리먼트의 다음에 놓여지는 가상 요소라고 생각하시면 될 것 같다. (예제에서는 절대 위치를 사용해서 위치를 수정한다.)

javascript 쓰기 싫을때 이용해볼만하다.
반응형