애플리케이션이나 웹 사이트를 이용하다 보면 아이콘이나 양식 필드가 무슨 용도인지 알 수 없을 때가 있습니다.
대부분의 사람들은 본능적으로 요소 위에 마우스를 올려 정보를 제공하는 팝업을 찾을 것 입니다. 이를 일반적으로 “툴팁”이라 부릅니다.
툴팁 요소는 사용자 인터페이스의 핵심 구성요소로, 디자이너가 화면을 어지럽히지 않고도 웹 페이지에 추가 정보를 넣을 수 있게 해줍니다.
이는 폼 양식이나 체크아웃 플로우, 튜토리얼 등에서 매우 유용하게 쓰입니다.
이 포스트에서는 HTML로 간단히 툴팁 요소를 만드는 방법을 알아보겠습니다.
Table of Contents
HTML에서 툴팁 이란?
툴팁 이란, 특정 요소 위에 커서를 올려놓으면 나타나는 텍스트가 포함된 사용자 인터페이스입니다.
여기에는 일반적으로 사용자가 알고 싶어하는 추가 설명, 맥락, 지침을 알려주는 텍스트가 포함됩니다.
이는 페이지 공간을 절약하기 위해 숨기고 필요할 때 쉽게 접근할 수 있는 구성에 적합합니다.
예를 들어, 사용자가 메뉴 항목이나 아이콘 위에 마우스를 올려놓으면 버튼의 목적을 설명하는 툴팁이 나타납니다.
가능한한 툴팁 요소를 쓰지 말고 각 요소의 목적을 명확하게 전달하는 방법을 생각해야 하지만 약간 더 많은 정보를 넣을 필요가 있는 경우에 사용하는게 좋습니다.
HTML로 툴팁 만드는 방법
순수 HTML과 CSS만을 사용하는 여러 방법이 있습니다.
기본적으로 마우스를 올렸을 때 트리거해줄 HTML 요소를 만들어야 합니다.
여기서는 div 태그를 사용하고 클래스명을 hover-text로 하겠습니다.
<div class="hover-text">hover me</div>다음으로 툴팁 자체에 대한 요소를 만들어야 합니다. 이는 span 태그에 클래스명을 tooltip-text로 하겠습니다.
이 요소를 hover-text div 내에 배치하여 부모 요소와 연결하겠습니다.
<div class="hover-text">hover me
<span class="tooltip-text">I'm a tooltip!</span>
</div>마지막으로 동작을 부여하기 위해 CSS를 적용해야 합니다.
가장 중요한 것은 visibillity: hidden 으로 툴팁 텍스트를 숨기고 z-index: 1 로 다른 요소보다 위에 위치하도록 배치하는 것 입니다.
또한 커서가 위에 올라갔을 때만 이벤트가 발생해야 하므로 hover 수도 클래스를 사용합니다.
.tooltip-text {
visibility: hidden;
position: absolute;
z-index: 1;
width: 100px;
color: white;
font-size: 12px;
background-color: #192733;
border-radius: 10px;
padding: 10px 15px 10px 15px;
}
.hover-text:hover .tooltip-text {
visibility: visible;
}
위의 HTML과 CSS 코드를 모두 적용하면 이미지와 같이 요소 위에 마우스를 올리면 텍스트가 뜨는 화면을 볼 수 있습니다.
See the Pen tooltip-1 by shinyks (@shinyks) on CodePen.
화살표가 있는 툴팁 만들기
화살표는 부모 요소에 시작적으로 연결하여 요소가 사용자에게 “말하는” 것 처럼 보이게 할 수 있습니다.
이를 위해 ::before 수도 클래스를 사용합니다. 이 가상 요소는 기본적으로 패딩만 있는 빈 요소를 만들고 90도 회전시켜 말풍선 처럼 보이게 배치됩니다.
See the Pen tooltip-2 by shinyks (@shinyks) on CodePen.
fade, delay 효과 추가하기
여기에 몇 가지 효과를 추가할 수 있습니다. 가장 많이 하는 것은 페이드 효과를 주는 것과 잠시 뒤에 뜨도록 딜레이를 거는 것 입니다.
fade-in, fade-out 효과를 주려면 opacity 속성과 transition 속성을 함께 사용해야 합니다.
tooltip-text의 opacity를 0으로 설정해 처음에 보이지 않게 하고, hover 이벤트가 발생하면 opacity를 1로 설정하고 transition: opacity 0.5s를 추가해 투명도가 부드럽게 변하도록 합니다.
또한 딜레이를 걸려면 transition-delay 속성을 추가하면 됩니다.
See the Pen tooltip-3 by shinyks (@shinyks) on CodePen.
이미지에 툴팁 달기
이미지에 추가하는 방법은 간단합니다. img 태그의 title 속성에 텍스트를 넣으면 끝입니다.
모든 최신 브라우저에는 이미지의 제목을 표시해주는 기능이 기본으로 제공됩니다.
See the Pen tooltip-4 by shinyks (@shinyks) on CodePen.
소셜 미디어 아이콘과 툴팁
바로 사용할 수 있는 소셜 미디어 아이콘의 예제 코드는 다음 codepen에서 확인할 수 있습니다.
See the Pen tooltip-5 by shinyks (@shinyks) on CodePen.
정리
페이지의 콘텐츠를 만들 때는 가능하면 페이지를 보는 것만으로도 사용자에게 필요한 모든 정보를 제공 해야 합니다. 하지만 때로는 약간의 추가 도움이 필요할 수도 있습니다.
그렇기 때문에 툴팁 요소는 웹 사이트와 웹 애플리케이션의 중요한 UI 구성 요소로 인터페이스를 어지럽히지 않고도 필요할 때 사용자에게 추가 정보를 제공할 수 있습니다.
간단한 HTML과 CSS를 사용하면 모든 페이지에 쉽게 추가할 수 있습니다. 그리고 몇 가지 추가 효과로 사용자를 사로잡는 작은 기쁨의 순간을 만들 수 있습니다.