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 쓰기 싫을때 이용해볼만하다.

반응형