CSS, JavaScript 및 jQuery로 40 개 이상의 유용한 툴팁 스크립트
재미있는 UI 요소 인 도구 설명 (infotips라고도 함)은 작은 상자를 마우스 커서는 정보가있는 특정 텍스트 또는 이미지 위에 올려 놓습니다. 엘리먼트가 맴돌다. 사용자 경험 측면에서 툴팁은 사용자에게 가장 빠르고 쉬운 정보 소스를 제공합니다. 아무 것도 클릭하지 않고.
툴팁을 텍스트에 추가하는 가장 간단한 방법은 HTML 태그를 사용하는 것입니다. 또는 TITLE =””, ALT =””. 그러나, 정말 멋지다. JavaScript 및 CSS를 사용하여 만들 수있는 툴팁 디자인 및 스타일 툴팁 스크립트를 사용합니다. 한 번 보자.
CSS
Balloon.css - 풍선은 CSS 라이브러리입니다. SasS와 LESS로 구성된 대화 형 툴팁을 표시합니다. 툴팁의 내용과 위치는 데이터- 속성. 왼쪽, 오른쪽 또는 왼쪽 - 오른쪽에 툴팁을 표시 할 수 있습니다. 너는 심지어 콘텐츠에 그림 이모티콘 추가. Balloon.css는 NPM을 통해 설치하거나 CDNJS에서로드 할 수 있습니다..
심플 - 사용 가능한 SasS로 제작되었습니다. 요구 사항에 맞게 코드를 재구성하고 다시 컴파일하십시오.. 툴팁의 위치와 내용은 클래스 이름과 데이터 도구 설명 속성. Simptip은 NPM, Yarn 및 Bower 패키지.
힌트 .CSS - 툴팁을 표시하는 인기있는 CSS 라이브러리 중 하나 인 Hint.css는 Fiverr, Webflow 및 Tridiv와 같은 많은 인기있는 웹 사이트에서 사용됩니다. 다른 두 개의 CSS 라이브러리와 달리, Hint.css 사용 아리아 레이블 클래스 이름을 통해 크기와 색상을 구성 할 수 있습니다. BEM 방법론을 사용합니다. Hint.css는 NPM, Bower 및 CDNJS에서 사용할 수 있습니다..
마이크로 팁 - 툴팁을 만들기위한 또 다른 멋진 CSS 라이브러리 “접근성” 마음에, Microtip 용도 아리아 레이블 툴팁 내용 및 데이터- 속성을 사용하여 툴팁 크기 및 위치 구성.
CSS 변수를 사용하여 CSS 파일로 도구 설명을 사용자 정의 할 수 있습니다. CSS 변수는 많은 웹 및 모바일 브라우저에서 이미 지원됩니다. Microtip은 NPM, Yarn 패키지 및 UNPkg CDN으로 제공됩니다..
웬크 - 단지 733 바이트입니다. 초경량 라이브러리 CSSNext, LESS 및 SCSS를 사용하여 초 현대식 CSS로 작성 스타일을 원하는대로 사용자 정의하고 다시 컴파일 할 수 있습니다. Wenk은 NPM, Yarn 및 다음 무료 CDN 서비스 (rawgit.com 및 unpkg.com)에서 다운로드 할 수 있습니다..
툴팁 - 다른 경량 CSS 라이브러리 크기는 약 1KB입니다. Tooltippy에는 툴팁의 스타일을 지정하기위한 몇 가지 미리 만들어진 테마가 포함되어 있습니다. Stylus라는 CSS 프리 프로세서로 작성되었습니다. 가능한 방법에 대한 지침보기 이러한 테마를 확장하거나 사용자 정의.
우아한 팁 - 이 라이브러리에는 몇 가지가 있습니다. 미리 만들어진 테마 제공된 클래스 이름으로 변경할 수 있습니다. HTML5에 의존하는 다른 라이브러리와는 달리 데이터- 아니면 그 아리아 레이블 속성을 사용하려면 ElegantTips에 도구 설명을 추가하는 데 필요한 추가 요소가 필요합니다. 이렇게하면 문자 그대로 툴팁에 간단한 텍스트 이상으로 내용 추가.
Tootik - 이 CSS 라이브러리는 CSS, LESS 및 SasS 형식의 스타일 시트를 제공 할뿐만 아니라 도구 설명을 사용자 정의하기 쉬운 GUI. 이 도구로 생성 된 HTML을 복사하여 붙여 넣기 만하면됩니다. 그렇게 간단합니다..
바닐라
TippyJS - Popper.js가 지원하는 TippyJS에는 도구 설명을 구성하는 다양한 옵션. 애니메이션, 툴팁 화살표, 너비, 크기, 테마 등을 사용자 정의 할 수 있습니다. 또한 콜백 함수를 제공합니다. 툴팁을 보이거나 숨길 때 함수를 실행한다.. 이러한 기능 덕분에 TippyJS는 강력한 JavaScript 라이브러리 중 하나로 툴팁을 만들 수 있습니다..
Darsain 툴팁 - 이 라이브러리는 툴팁의 기본 구현을 제공합니다. 그럼에도 불구하고, 그것은 이팁 동작을 구성하는 광범위한 옵션을 제공하며, 툴팁 모양을 변경하는 클래스 이름 세트. 툴팁은 IE9와 같은 구형 브라우저에서 잘 작동하고, 필요한 경우 IE8을 약간 조정합니다.
거품 - Bubb는 고급 JavaScript 사용자에게 적합 할 수 있습니다. 그것의 사용 간단한 텍스트 표시 외에 광범위한 API, 프로그래밍 방식으로 복잡한 HTML 컨텐트를 툴팁에 추가 할 수 있습니다. 그것은 꽤 멋지다. 당신은 문서를 참조 할 수 있습니다..
포퍼 - 기술 추상화가 포함되어 있습니다. “아저씨”, 툴팁, 팝 오버, 드롭 다운 등. TippyJS는이를 라이브러리 기반으로 사용하고 Bootstrap, Microsoft, Atlassian과 같은 웹상의 유명 인사들에 의해 사용됩니다.
YY 툴팁 - 다른 라이브러리와 달리 YY 도구 설명 HTML 요소 또는 속성을 추가 할 것을 요구하지 않습니다.. JavaScript로 완벽하게 작동하며 HTML 요소 대신 객체에 정의 된 내용, 위치 및 색상입니다. 완벽한 자바 스크립트 웹 응용 프로그램과 함께 사용하면 완벽합니다..
Position.js - 툴팁을 생성하는 또 다른 뛰어난 기본 JavaScript 라이브러리 인 Position.js 기능을 구성하고 거기에서 생성 된 코드를 복사하여 붙여 넣기하는 GUI를 제공합니다. Position.js는 React.js 또는 Vue.js와 함께 사용할 수 있습니다..
Bezet 툴팁 - 이 라이브러리는 툴팁을 표시하는 14 가지 옵션; 에 권리, 왼쪽, 바닥, 왼쪽 중심, 오른쪽 끝, 바닥 중앙, 그것의 꼭대기에, 그것은 또한 충분히 똑똑 할 수 있었다. 사용 가능한 공간을 기준으로 툴팁 위치를 조정하십시오. 툴팁 주위. 데모보기.
MouseTip - 이 JavaScrtipt 라이브러리는 커서 위치를 따라 움직이는 툴팁. 툴팁은 비표준으로 구성됩니다. 쥐셋- 속성 대신 HTML5 사용 데이터- 속성. Mousetip은 NPM 모듈로 제공됩니다..
인터넷 - MousetTip과 매우 유사하게이 라이브러리에서 생성 된 툴팁 커서 위치를 따른다.. 모든 것은 HTML 대신 JavaScript Object를 통해 구성되며 최신 브라우저 용 속성도 내장. 가볍고 빠릅니다..
MTip - 도구 설명을위한 JavaScript 라이브러리 훌륭한 브라우저 호환성. 옵션을 통해 완벽하게 사용자 정의 할 수있는 IE8과 호환되며, 도구 설명을 모든 요소에 추가 할 수도 있습니다. img (이미지 요소).
Bubblesee - 간단한 기능을 제공하는 경량의 JavaScript 라이브러리 “툴팁”. 복잡한 옵션없이 JavaScript 라이브러리를 사용하여 출력을 사용자 정의하는 것이 쉽습니다. 툴팁 모양을 변경하려면 Sass 파일이 제공됩니다. 데모보기.
팁 파이 - 최신 JavaScript 구문 인 ES6으로 제작되었습니다., Tipfy의 크기는 2KB입니다.. 라이브러리는 두 가지 버전의 파일을 제공합니다. tipfy.min.js 스크립트를 제공 최신 ES6 구문, 과 tipfy.es5.min.js 이전 브라우저와의 호환성이 필요한 경우 그것은 사용 데이터- 툴팁을 사용자 정의하기위한 속성; 그만큼 데이터 팁티 쪽, 예를 들어 툴팁 방향을 설정하고 데이터 팁 텍스트 도구 설명 내용을 추가하는 속성.
jQuery
툴팁스터 - 이 라이브러리는 다음과 같은 거의 모든 것을 사용자 정의 할 수있는 광범위한 옵션을 제공합니다. 테마, 애니메이션, 터치 지원, 컨텐츠, 열기 및 닫기 트리거, 또한 사용자 정의 이벤트 리스너와 콜백을 제공하여 개발자가 사용자 정의 기능을 사용하여 툴팁을 확장 할 수 있도록합니다. 또한 jQuery 플러그인이기 때문에 툴팁은 jQuery 버전에 따라 IE6과 같은 이전 브라우저에서 작동합니다. 사용되고있다..
Protip - 또 다른 광범위한 jQuery 플러그인 인 Protip은 49 개 위치를 지원합니다., 툴팁 내용, 아이콘 지원, 사용자 정의 콜백을위한 HTML, 그리고 훨씬 더. Protip은 도구 설명을 쉽게 사용자 정의 할 수있는 GUI를 제공합니다..
파워 팁 - 이 jQuery 플러그인은 툴팁을 구현할 수있는 다양한 방법을 개발자에게 제공하는 옵션 및 API도 제공합니다. 그것은 키보드 탐색; 요소를 탐색 할 때 팝업이 나타나게합니다. 탭 건반. PowereTip NPM 모듈로 사용 가능. RequireJS 및 Browserify와 함께 사용할 수 있습니다..
액세스 가능한 아리아 툴팁 - 내게 필요한 옵션 기능이 내장 된 jQuery 플러그인이 툴팁입니다. 제목, 여러 줄의 텍스트 및 닫기 단추가있는 대화 상자를 표시하도록 설계되었습니다.. 우리 목록에있는 그것 자체 중 하나입니다..
TipsJS - 간단한 jQuery 플러그인이지만, 아주 독특한 기능을 제공합니다. 그만큼 툴팁 콘텐츠는 데이터 도구 설명 속성. 또한 Markdown 형식과 비슷한 형식으로 내용을 특수 문자로 묶을 수도 있습니다. 우리는 사용할 수 있습니다. * 내용을 굵게 만들기, ~ ~ 기울임 꼴 및 ^ 헤딩 용.
다크 툴팁 - 이 라이브러리는 툴팁을 켜는 데 정말로 유용한 몇 가지 기능을 제공합니다. 예를 들어 확인 버튼 - 예 및 아니오, 툴팁이 표시되는 동안 배경 흐리게 표시하고 HTML 요소 추가 콘텐츠에. 데모 페이지를 꼭 봐야한다고 생각합니다..
아리아 툴팁 - 내게 필요한 옵션 기능이 내장 된 다른 툴팁 인이 jQuery 플러그인은 WAI-ARIA 1.1을 준수합니다. 그것은 당신이 할 수있는 방식으로 반응합니다. 서로 다른 뷰포트 크기에 다른 구성 제공. Aria Tooltip은 NPM 모듈로 사용 가능합니다. t-aria-tooltip.
Toolbar.js - 다른 jQuery 플러그인은 간단한 텍스트 또는 HTML 내용을 툴팁에 표시 할 수 있지만이 jQuery 플러그인은 툴바를 만든다.. 툴팁에는 일반적으로 액션을 수행하는 아이콘이있는 두 개 이상의 링크가 포함됩니다. 딸깍 하는 소리, 도구 모음처럼. 설명서 및 예제를 확인하십시오..
VueJS
V- 도구 설명 - V-Tooltip은 Popper.js에 의해 구동되는 Vue.js 구성 요소입니다. 그것은 새 지시어 v- 도구 설명 모든 요소에 추가하여 툴팁을 만들 수 있습니다.. 그만큼 v- 도구 설명 툴팁 내용 또는 옵션을 포함 할 수 있습니다. 관례는 제외하고 v- 도구 설명 지시문을 사용하여 도구 설명을 추가 할 수도 있습니다. V- 팝 오버 구성 요소. 이 구성 요소를 사용하면 더 복잡한 내용을 툴팁에 추가하십시오. Vue.js 구성 요소 또는 HTML 포함.
Vue-Bulma 툴팁 - Bulma UI Framework를 기반으로 툴팁을 생성하는 Vue.js 구성 요소. 이 라이브러리는 Vue Bulma의 구성 요소 중 일부입니다. 하지만 툴팁 구성 요소는 NPM 모듈로 사용할 수 있습니다. vue-bulma-tooltip 독립 실행 형 구성 요소로 사용할 수 있음.
Vue 지시어 - 도구 설명 - 전반적으로 Popper.js를 기반으로하는 V-Tooltip 구성 요소와 유사하며 동일한 지시어를 제공합니다. v- 도구 설명. 그러나, 그것은 제공하지 않는 것 같습니다. V- 팝 오버 구성 요소.
Vue-Tippy - 이 라이브러리는 Tippy.js를 Vue.js 구성 요소로 래핑합니다. 이 제품에는 맞춤 Vue.js 지시문이 있습니다. v-tippy HTML 속성과 같이 작동합니다. 툴팁 또는 옵션을 사용자 정의 할 수있는 컨텐츠를 추가 할 수 있습니다. 또한 사용자 정의 Vue.js 구성 요소를 사용하여 툴팁 내용에 HTML 선택권.
VueJS-Popover - 사용자 정의 지시문이있는 사용자 정의 Vue.js가 호출되었습니다. V- 팝 오버 및 두 개의 사용자 지정 구성 요소 즉
Vue-Hint - Hint.css를 래핑하는 Vue.js 플러그인. 플러그인 기능 v-hint-css 지시문을 사용하여 툴팁을 추가합니다. 그것 Hint.css와 동일한 옵션 집합을 제공합니다., 그래서 그들을 JavaScript 객체 또는 Vue.js 수정 자로 추가 할 수 있습니다..
ReactJS
호쾌한 반응하기 - React 구성 요소는 툴팁 세트를 표시합니다. 새로운 사용자를 안내하여 새 응용 프로그램에 익숙해집니다..
반응 플로터 - 이 라이브러리는 Popper.js를 Floater라는 React 구성 요소로 랩핑하므로 Floater와 동일한 뛰어난 기능을 제공합니다. 툴팁과 팝업을 추가 할 수 있으며, 이 구성 요소로 놀아 라. 이 샌드 박스를 통해.
반응 오토 팁 - 자동 위치 결정 기능을 갖춘 간단한 React 구성 요소, eact Autotip 툴팁의 위치를 자동으로 조정한다. 사용 가능한 공간이 바뀌면.
반응이 느껴진다. - Tippy.js 및 Popover.js 위에 구축되었습니다. 이 라이브러리는 툴팁 그 구성 요소 당신은 당신의 React 어플리케이션에 포함시킬 수 있습니다..
반응 암시 - Hint.css를 확장하는 React 구성 요소입니다. 구성 요소는 Hint.css에서 사용할 수없는 몇 가지 기능을 추가합니다. 자동 위치, 지연 및 콜백 기능.
더
엠버 툴팁 - 툴팁을 만들기위한 Ember.js 구성 요소는 Popper.js 위에 구축됩니다. 또한이 구성 요소는 내게 필요한 옵션을 염두에두고 설계되었으며이 문제에 대해 약 508 개의 컴플라이언스를 준수하도록 개선되었습니다.
D3 팁 - D3.js 플러그인. D3.js는 차트,지도, 다이어그램 등의 데이터 시각화를위한 JavaScript 라이브러리입니다.이 플러그인을 사용하면이 데이터 위에 툴팁을 표시 할 수 있습니다.
