–
툴팁은 웹 환경에서 사용자에게 추가 정보를 제공하는데 주로 활용됩니다. 모든 정보를 한 번에 보여줄 수 없는 상황에서, 특정 메뉴나 기능을 활용하고자 할 때 활용할 수 있으며, 이를 통해 사용자는 기능 사용 시점에 맞춰 자세한 정보를 확인하고 기능을 활용할 수 있습니다. 오늘은 다양한 툴팁을 무료로 적용할 수 있도록 도와주는 라이브러리를 몇 개 소개하고자 합니다.
–
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’는 사용자가 웹사이트를 처음 방문할 때 확인해야 할 내용이나 기능에 대한 안내를 만들 수 있는 자바스크립트 라이브러리입니다. 오픈소스로 제공되고 있으며, 신규 사용자나 기능 업데이트 시 자주 사용할 수 있는 툴팁이기도 합니다. (라이브러리 자세히 보기)
–
함께 활용해보세요!
- 간단하지만 꼭 필요한 마이크로인터랙션 구현을 도와주는 자바스크립트 라이브러리 ‘Micron.js’
- 반응형 그리드 레이아웃을 확인할 수 있는 오픈소스 라이브러리 ‘Muuri’
- 자주 쓰이는 레이아웃 패턴을 자세히 확인할 수 있는 : Layout patterns
–