커스텀 툴팁(tooltip) 만드는 방법

Last Modified : 2018-06-30 / Created : 2018-06-25

14,782
View Count

주소 복사하기

제한된 영역에 더 많은 정보 또는 추가적인 정보를 제공할 수 있는 툴팁창을 만들어보려합니다. 이때 title 속성을 이용하는 시스템 툴팁이 아닌 커스텀으로 툴팁을 만드려면 어떻게할까요?

! 툴팁이 필요한 이유

Admin 관리자 웹사이트를 만드는 경우 테이블 공간에 많은 데이터가 추가될 수 있습니다. 하나의 cell에 너무 많은 텍스트가 위치하는 경우 텍스트 때문에 몇 줄 씩 내려가는 경우가 생길 수 있죠. 이 경우 생략 기호 ...를 사용하거나 아니면 '외 몇 개' 등으로 표기하기도합니다.

이런 경우 툴팁창을 출력해서 보여주면 매우 편리한데 title 속성을 적용하는 것으로 가능합니다. title 속성이 적용된 엘리먼트에 마우스를 올리면 전체 내용을 확인할 수 있는 작은 툴팁이 마우스 위치에 자동으로 나타나게됩니다. 다만 시스템 툴팁으로 제약이 따를 수 있죠.

# 커스텀 툴팁 만들기

title 속성은 쉽고 빠르게 만들 수 있지만 전체 디자인과 어울리지 않거나 아니면 편의성이나 사용성 측면에서 더 나은 방법을 적용하기 어렵습니다. 이런 경우 직접 툴팁을 만드는 방법이 있는데 이 경우 적용 가능한 방법으로 keyframes animation을 사용하는 방법입니다.

"animation keyframes를 적용하자 !!"

keyframes는 애니메이션으로 나타날 동작을 미리 정의하며 animation 속성을 사용해 이 때 저장된 애니메이션 동작을 적용하는 것이 가능합니다. 이를 이용하여 아래의 프로세스에 따라 동작하는 툴팁을 구현할 수 있습니다. (참고로 자바스크립트를 사용할 수도 있지만 css만 사용하는 방법으로 간편하고 쉽습니다.)

1. 특정 엘리먼트에 마우스 오버시 애니메이션 동작
2. 애니메이션은 1번은 아무것도 동작하지 않음
3. 애니메이션 2번으로 일정 시간이 지나 화면을 나타나게함
4. 다시 마우스가 아웃되면 보이지 않음

위와 같이 동작하게 될 것입니다. 그럼 아래에서 예제를 사용하여 알아보죠.

# 커스텀 툴팁(custom tooltip) 예제보기

여기에는 사이트 정보를 가진 리스트가 있습니다. 이 중에서 생략된 ...으로 된 부분에 마우스를 올리면 일정시간 후에 툴팁창이 자동으로 나타나도록 만들어봅니다. 먼저 html 코드입니다.
@ tooltip.html

<table border="1">
<tr>
<td>No</td>
<td>Sitename</td>
<td>URL</td>
</tr>
<tr>
<td>1</td>
<td>webisfree</td>
<td>https://webis...<span class="tooltip">https://webisfree.com"</span></td>
</tr>
<tr>
<td>2</td>
<td>test site</td>
<td>https://testonl...<span class="tooltip">https://testonlyblahblah.site</span></td>
</tr>
</table>

아래는 css 코드입니다.

tr td {
padding: 2px 10px;
position: relative;
}
td .tooltip {
display: none;
animation: tooltipAni 1s;
transition: opacity 0.5s;
position: absolute;
top: 5px;
left: 5px;
background: #fff;
}
td:hover .tooltip {
display: block;
}

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

이제 모든 코드가 완성되었습니다. 위 코드를 작성하면 실제 웹사이트에서 어떻게 동작하는지 아래에서 알아보세요. 아래에서 위 코드를 구현하였습니다. tooltip 클래스를 가진 요소에 마우스를 올려보시기 바랍니다.