Tippy.js - 경량의 바닐라 자바 ​​스크립트 툴팁 라이브러리

툴팁은 약간의 추가 컨텐츠를 보여주는 데 유용합니다. 페이지의 공간을 절약하고 사람들의 관심을 끄는 무언가를 움직일 수있는 공간을 제공합니다..

과거에는 툴팁 스크립트를 다루었지만 많은 개발자는 사용자 정의 라이브러리를 원합니다. 일부는 jQuery를 선호하고 다른 일부는 단순한 vanilla JS를 원한다..

Tippy 플러그인은 후자 그룹에게 가장 잘 작동합니다. 바닐라 JS 코드로 작업하고 싶은 사람들.

Tippy.js를 사용하면 모든 기능을하는 툴팁 라이브러리 Popper.js 위에서 실행됩니다. 이것은 플러그인이 작은 의존성을 가지지 만, jQuery 라이브러리보다 관리가 훨씬 쉽다는 것을 의미한다..

Tippy의 아름다움은 무엇입니까? 기본 Popper 스타일을 추가하여 더욱 역동적 인 툴팁 놀라운 효과.

페이드, 슬라이드, 흔들기, 사용자 정의 지속 시간, 콜백 메소드 및 심지어 자동 회전 툴팁과 같은 동적 효과를 추가 할 수 있습니다..

정말이 플러그인은 잘 정의 된 유용성 기능으로 완전히 새로운 수준으로 툴팁을 가져갈 것입니다. 계속 보관할 수 있습니다. 특정 페이지 요소가있는 화면에 고정 된 툴팁, 화면이 너무 작아지면 방향을 바꾸도록하십시오..

또한 터치 장치를 지원하므로 반응 형 레이아웃에 적합합니다. 툴팁 HTML은 최대한의 접근성을 위해 ARIA 표준을 사용하여 라벨이 지정됩니다. 나는이 플러그인에 대해 나쁜 말을 할 수 없다.!

자신의 사이트에서이 기능을 사용하려면 GitHub에서 소스 코드 사본을 다운로드하십시오. 여기에는 npm을 사용하여 설치하는 방법에 대한 세부 사항과 함께 주요 플러그인 파일이 포함됩니다.

기본 Tippy.js 스크립트 파일에는 포함 된 Popper.js가 포함되어 있으므로 추가 라이브러리를 다운로드 할 필요조차 없습니다. 필요한 것은 기본 JS / CSS 파일과 도구 설명을 실행하는 웹 페이지뿐입니다..

몇 가지 예제를 더 자세히 읽고 싶다면 Tippy.js 홈페이지에서 라이브 샘플 + 복사 및 재사용이 가능한 코드 스 니펫을 살펴보십시오..