HTML & CSS - Basic Tooltip & Custom Tooltip 만들기

HTML & CSS - Basic Tooltip & Custom Tooltip 만들기

 

이미지로만 구성되어 있는 버튼그룹에 설명을 더하기 위해 툴팁기능을 넣으려고 한다. 

툴팁 기능이란 마우스 오버시에 나타나는 설명창이라고 생각하면 된다. 위와 같이 이미지로만 되어있어 글로 추가 설명이 필요한 경우나 아니면 제한된 영역내에서 짤린 내용을 보여주는 용도로도 사용이 가능하다.

 

HTML

먼저 가장 기본적인 html 태그에 속성값을 이용한 방법을 알아보자.

 <button class="btn" title="Option"><img src="./img/option.png"></button>

이와 같이 태그안에 title속성값을 부여해주고 오버시 보여줄 내용을 적어주면 된다.

 

CSS

title을 이용한 방법은 손쉽고 편하게 구현이 가능하다는 장점이 있지만 전체 디자인등을 고려했을때 부적합할 수 있다.

이때 CSS를 이용하면 디자인부분을 원하는대로 변경이 가능하며 animation keyframes까지 추가하여 여러 동작을 추가할 수도 있다.

 

먼저 html 코드이다. 위에 예와 같이 버튼으로 예를 들어보겠다.

<button>https://goog..<span class="tooltip">https://google.com"</span></button>

이렇게 오버시 나타나게 될 span태그에 내용을 추가하여 만들어두고 CSS에서 기본을 display none으로 설정 후 오버시 block으로 변경해주면 title과 같은 효과를 낼 수 있다. 이렇게 되면 나오는 창은 css를 통해 수정이 가능하다.

 

.tooltip {
  display: none;
  animation: tooltipAni 1s;
  transition: opacity 0.5s;
  position: absolute;
  top: 5px;
  left: 5px;
  background: #fff;
}
button:hover .tooltip {
  display: block;
}

마지막으로 animation을 걸어서 keyframes으로 효과를 더해준다.

@keyframes tooltipAni {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}