툴팁은 웹 환경에서 사용자에게 추가 정보를 제공하는데 주로 활용됩니다. 모든 정보를 한 번에 보여줄 수 없는 상황에서, 특정 메뉴나 기능을 활용하고자 할 때 활용할 수 있으며, 이를 통해 사용자는 기능 사용 시점에 맞춰 자세한 정보를 확인하고 기능을 활용할 수 있습니다. 오늘은 다양한 툴팁을 무료로 적용할 수 있도록 도와주는 라이브러리를 몇 개 소개하고자 합니다.

1.Tippy.js

위치는 물론, 테마(컬러, 사이즈 등), 애니메이션까지 다채로운 툴팁을 확인할 수 있는 라이브러리입니다. HTML 페이지에 바로 적용할 수 있는 코드를 제공하며, 리액트를 지원하는 라이브러리가 별도 제공됩니다. 사용자가 HTML 요소 위로 마우스를 가져갈 때 AJAX를 통해 콘텐츠를 로드할 수 있는 등 활용도가 높은 것이 장점입니다. (라이브러리 자세히 보기)

2.Popper.js

라이브러리 사용 시, 용량이 클 경우 웹사이트 최적화에 방해가 될 수 있기 때문에 용량은 중요한 기준 중 하나인데요. Popper의 가장 큰 장점은 용량이 작다는 점입니다.(3kb) 제공되는 툴팁의 종류는 많지 않지만, 기본적인 정보 전달의 목적에 있어 용량이 작다는 점과 함께 사용하기 좋은 라이브러리 중 하나라고 생각합니다. (라이브러리 자세히 보기)

3.Hint

‘Hint’ 역시 용량이 작은 툴팁 라이브러리 중 하나입니다. (1.5kb) 개인 프로젝트는 물론 상업적 서비스에 사용 가능한 라이브러리로, 위치 지정, 상황(오류 등) 별 안내, 사이즈 등에 따라 툴팁을 활용할 수 있도록 도와줍니다. CSS로 구축되어 있어 다양한 유형의 웹 프로젝트에 적용할 수 있다는 장점이 있으며, 최신 브라우저를 지원합니다. (라이브러리 자세히 보기)

4.Microtip

또 하나의 CSS 기반 툴팁 라이브러리입니다. 용량은 1kb에 불과합니다. 툴팁 표시 위치 등만 지정해 빠르게 서비스 내 적용하고 싶을 때 활용하기 좋은 라이브러리라고 생각합니다. 그만큼 기본에 충실하게 구성되어 있기 때문입니다. (라이브러리 자세히 보기)

5.Tootik

위치, 타입, 기능(일정시간 뒤 툴팁 노출 등) 세 가지 조건에 따라 원하는 툴팁을 생성할 수 있습니다. 선택한 조합에 따른 툴팁을 오른쪽 끝에서 바로 확인해볼 수 있으며, 이를 통해 가장 최적의 툴팁을 찾아볼 수 있어 더욱 매력적인 라이브러리입니다. (라이브러리 자세히 보기)

6.Toolbar

Toolbar’는 툴바에 해당하는 툴팁을 쉽게 생성할 수 있게 도와주는 jquery 라이브러리입니다. 한 가지 컬러가 아니라 여러 컬러를 함께 제공해주기에 웹사이트 디자인에 맞는 색상을 선택하거나, 위치를 조정하거나, 애니메이션 효과를 추가하는 등의 유용한 기능이 많이 포함되어 있습니다. (라이브러리 자세히 보기)

7.Introjs

Intro.js’는 사용자가 웹사이트를 처음 방문할 때 확인해야 할 내용이나 기능에 대한 안내를 만들 수 있는 자바스크립트 라이브러리입니다. 오픈소스로 제공되고 있으며, 신규 사용자나 기능 업데이트 시 자주 사용할 수 있는 툴팁이기도 합니다. (라이브러리 자세히 보기)

함께 활용해보세요!