40+ Scripturi utilitare cu CSS, JavaScript și jQuery

Un element de interfață UI interesant, tooltips (de asemenea, numit infotips) face o casetă mică apar atunci când cursorul mouse-ului este transmis peste un anumit text sau imagine cu informații în ceea ce privește elementul fiind suspendat. În ceea ce privește experiența utilizatorului, tooltipurile oferă utilizatorilor cea mai rapidă și mai ușoară sursă de informații fără să faceți clic pe nimic.

Deși cea mai simplă modalitate de a adăuga sfaturi de text la text este utilizarea etichetei HTML sau TITLE =””, ALT =””. Cu toate acestea, există unele foarte cool sugestii de desene și stiluri pe care le puteți crea cu JavaScript și CSS folosind scripturile de tip tooltips. Hai să aruncăm o privire.

CSS

Balloon.css - Balonul este biblioteca CSS compus din SasS și LESS pentru a afișa un instrument interactiv. Conținutul și poziția tooltip-ului pot fi configurate prin intermediul date- atribut. Puteți afișa vârful de ajutor la stânga, la dreapta sau la stânga-dreapta. Puteți chiar adăugați Emojis la conținut. Balloon.css poate fi instalat prin intermediul NPM și poate fi încărcat din CDNJS.

Simptip - Realizat cu SasS care să permită reconfigurați și recompilați codul pentru a se potrivi cerințelor dvs.. Poziția tipului de instrument și conținutul pot fi configurabile prin numele clasei și Date-tooltip atribut. Simptip este disponibil ca un NPM, Fire și Bower.

Hint.css - Una dintre cele mai populare biblioteci CSS pentru a afișa tooltip, Hint.css este folosit de multe site-uri populare precum Fiverr, Webflow și Tridiv. Spre deosebire de celelalte două biblioteci CSS, Hint.css folosește Aria-label Puteți configura dimensiunea și culoarea prin numele de clasă folosind metodologia BEM. Hint.css este disponibil pe NPM, Bower și CDNJS.

microtip - O altă minunată bibliotecă CSS pentru crearea unui tooltip construit cu “Accesibilitate” în minte, Microtip utilizări Aria-label pentru a ține conținutul de tip și date- atribut pentru a configura dimensiunea și poziția opțiunii.

Acesta utilizează variabila CSS care vă permite să personalizați tooltip-ul cu un simplu fișier CSS. Variabilele CSS sunt deja acceptate în multe browsere web și mobile. Microtip este disponibil ca pachet NPM, Fire și UNPkg CDN.

Wenk - Sunt doar 733 octeți. O bibliotecă foarte ușoară scris într-un CSS super-modern folosind CSSNext, LESS și SCSS astfel încât puteți personaliza și recompila stilurile așa cum vă place. Wenk poate fi descărcat de la NPM, Fire și următoarele servicii gratuite CDN: rawgit.com și unpkg.com.

Tooltippy - O alta Biblioteca CSS ușoară fiind de aproximativ 1 KB în dimensiune. Tooltippy include mai multe teme pre-create pentru styling tooltip. Este scris cu un pre-procesor CSS numit Stylus. Consultați instrucțiunile despre cum puteți extinde sau personaliza aceste teme.

ElegantTips - Această bibliotecă vine cu câteva temele pre-construite care pot fi schimbate cu numele de clasă furnizate. Spre deosebire de celelalte biblioteci care se bazează pe HTML5 date- sau Aria-label atribut, ElegantTips necesită un element suplimentar adăugat pentru a forma tooltip-ul. Acest lucru vă permite să adăugați literalmente orice conținut în tooltip dincolo de textul simplu.

Tootik - Nu numai că această bibliotecă CSS furnizează foaia de stil în format CSS, LESS și SasS, dar oferă și o ușor de utilizat GUI pentru a personaliza tooltip-ul. Puteți copia și lipi pur și simplu HTML-ul generat de acest instrument. Este atat de simplu.

VanillaJS

TippyJS - Realizat de Popper.js, TippyJS vine cu un abundența opțiunilor pentru a configura opțiunea de instrument. Putem personaliza animațiile, săgeata degetului, lățimea, dimensiunea, tema și multe altele. Acesta oferă, de asemenea, funcții Callback cu care puteți executați o funcție atunci când butonul de ajutor este afișat și ascuns. Aceste caracteristici îl fac pe TippyJS una dintre bibliotecile noastre puternice JavaScript de pe lista noastră pentru a crea o sugestie.

Darsain Tooltip - Această bibliotecă oferă implementarea de bază a unei sugestii. Cu toate acestea, acesta oferă opțiuni extinse de configurare a comportamentului prea tip, și a set de nume de clase pentru a schimba aspectul degetului. Modul de lucru funcționează bine în browser mai vechi ca IE9 și, dacă este necesar, IE8 cu câteva ajustări.

Bubb - Bubb ar putea fi potrivită pentru utilizatorii avansați de JavaScript. Folosirea lui API-uri extinse, în afară de afișarea unui text simplu, puteți să adăugați programatic un conținut HTML mai complex la tooltip. Este destul de misto; puteți consulta Documentele exemplele.

Popper - Conține o abstracție tehnică pentru a crea ceva “POP-uri”, ca o sugestie, un pop-up și drop-down-uri. TippyJS o folosește ca bază de bibliotecă și este folosită de nume mari pe web, cum ar fi Bootstrap, Microsoft și Atlassian.

YY Tooltip - Spre deosebire de celelalte biblioteci, YY Tooltip nu necesită adăugarea unui element HTML sau a atributelor. Acesta funcționează pe deplin cu JavaScript, iar conținutul, poziția și culorile sunt definite într-un obiect în loc de un element HTML. Este perfect pentru a fi utilizat împreună cu o aplicație web JavaScript completă.

Position.js - O altă excelentă bibliotecă nativă JavaScript pentru a crea sfaturi, Position.js oferă o interfață grafică pentru a configura funcția și pur și simplu copiați și lipiți codul generat acolo. Position.js poate fi utilizat împreună cu React.js sau Vue.js.

Indicație de siguranță - Această bibliotecă oferă 14 opțiuni pentru a afișa simbolul; cum ar fi pe dreapta, stânga, fund, stânga-centru, dreapta-end, bottom-centru, etc. În plus, este destul de inteligent încât ar putea ajustați poziția vârfului de instrument pe baza spațiului disponibil în jurul valorii de instrumenttip. Verificați demo-ul.

MouseTip - Această bibliotecă JavaScrtipt va crea a instrument care se va deplasa de-a lungul poziției cursorului. Pictograma de configurare este configurată cu un standard mousetip- în loc să utilizeze HTML5 date- atribut. Mousetip este disponibil ca un modul NPM.

Internetips - Destul de similar cu MousetTip, tooltip-ul generat de această bibliotecă urmează poziția cursorului. Totul este configurat prin obiectul JavaScript în loc de HTML și de atributele sunt, de asemenea, construite pentru browserele moderne. E ușor și rapid.

MTip - O bibliotecă JavaScript cu Tooltip cu compatibilitate excelentă a browserului. Este compatibil cu IE8, complet personalizabil prin Opțiuni, și puteți adăuga Tooltip la orice element chiar și pe un img (un element de imagine).

Bubblesee - o bibliotecă JavaScript ușoară care oferă o funcționalitate directă a unui “tooltip”. Este ușor să utilizați biblioteca JavaScript fără opțiuni complicate de personalizare a rezultatelor. Un fișier Sass este furnizat dacă doriți să schimbați aspectul de ajutor. Verificați demo-ul.

Tipfy - Construit cu sintaxa JavaScript modernă, ES6, Tipful este de numai 2 KB în dimensiune. Biblioteca oferă două versiuni de fișiere: tipfy.min.js oferind scenariul cu sintaxa modernă ES6, și tipfy.es5.min.js dacă aveți nevoie de compatibilitate cu browserele mai vechi. Folosește date- atribut pentru a personaliza tooltip-ul; Date-tipfy-side, de exemplu, este folosit pentru a seta direcția de undă și a folosi Date-tipfy text atribut pentru a adăuga conținutul tipului de instrument.

jQuery

Tooltipster - Această bibliotecă oferă opțiuni extensive pentru a personaliza aproape orice, cum ar fi temă, animație, suport tactil, conținut, declanșare deschisă și închisă, etc Acesta oferă, de asemenea, ascultător evenimente personalizate și callbacks care să permită dezvoltatorilor să extindă tooltip cu funcții personalizate. De asemenea, fiind un plugin jQuery, tooltip ar funcționa în browser mai vechi ca IE6, în funcție de versiunea jQuery folosit.

Protip - Un alt plugin extensie jQuery, Protip susține 49 de posturi, HTML pentru conținutul de tip tooltip, suport pentru pictograme, apeluri personalizate, si mult mai mult. Protip oferă o interfață grafică care vă permite să personalizați cu ușurință simbolul.

POWERTIP - Acest plugin JQuery aduce, de asemenea, Opțiuni și API-uri care oferă dezvoltatorilor o serie de modalități diferite de a implementa sfaturile de instrucțiuni. Susține navigare prin tastatură; face popup apare atunci când navigarea elemente cu Tab tastatură. PowereTip este disponibil ca modul NPM. Poate fi folosit cu RequireJS și Browserify.

Accesibil Aria Tooltip - Un plug-in jQuery cu caracteristica de accesibilitate încorporată, este de tip tooltip concepute pentru a afișa o casetă de dialog cu un titlu, multiline de text și un buton de închidere. Este una dintre cele proprii pe lista noastră.

TipsJS - Un plugin simplu jQuery, dar aduce caracteristici destul de distinctive. tooltip-ul este setat cu a Date-tooltip atribut. În plus, putem împacheta conținutul cu caractere speciale pentru a formata conținutul similar formatării Markdown. Putem folosi * pentru a face conținutul îndrăzneț, ~ pentru italic și ^ pentru poziția.

Întuneric - Această bibliotecă oferă câteva funcții utile pentru a activa butonul de instrument. De exemplu, putem adăuga a confirmați - Da și Nu, diminuați fundalul în timp ce este afișat butonul de ajutor și adăugați elemente HTML la conținut. Cred că ar trebui să verificați pagina demo.

Aria Tooltip - Un alt instrument cu caracteristica de accesibilitate încorporată, acest plugin jQuery este compatibil cu WAI-ARIA 1.1. Este receptiv în așa fel încât să puteți oferă configurații diferite pentru diferite dimensiuni ale ferestrei de vizualizare. Aria Tooltip este disponibil ca un modul NPM numit t-arie-tooltip.

Toolbar.js - În timp ce celălalt plugin jQuery nu poate afișa decât text simplu sau conținut HTML într-o sugestie, acest lucru jQuery plugin-ul creează o bară de instrumente. Sugestia de instrument ar conține două sau mai multe legături cu o pictogramă care va efectua de obicei o acțiune clic, ca orice bara de instrumente. Consultați documentația și exemplele.

VueJS

V-Tooltip - V-Tooltip este un component Vue.js alimentat de Popper.js sub capota. Acesta oferă o noua directivă numită v-tooltip care pot fi adăugate la orice element pentru a crea o sugestie. v-tooltip poate conține conținutul tipului de instrument sau opțiunile. În afară de obicei v-tooltip , puteți adăuga, de asemenea, tooltip-ul cu v-popover componentă. Cu această componentă, poți adăugați conținut mai complex în tooltip cu componenta Vue.js sau HTML.

Vue-Bulma Tooltip - O componentă Vue.js pentru a crea o sugestie bazată pe framework-ul UI Bulma. Această bibliotecă face parte din componenta Vue Bulma. Cu exceptia componenta tooltip este disponibilă ca un modul NPM numit Vue-Bulma-tooltip pe care le puteți utiliza ca componente independente.

Vue-Directiva-Tooltip - În general, este similar cu componenta V-Tooltip bazată pe Popper.js și oferă aceeași direcție numită v-tooltip. Cu toate acestea, nu pare să ofere v-popover component.

Vue-Tippy - Această bibliotecă împachetează Tippy.js într-o componentă Vue.js. Dispune de o direcție personalizată Vue.js numită v-Tippy care funcționează ca un atribut HTML; putem adăuga conținut pentru sugestie sau opțiunile de personalizare. Ea face, de asemenea, a componenta Vue.js personalizată pe conținutul de tip tooltip folosind html opțiune.

VueJS-Popover - Un Vue.js personalizat, cu o directivă personalizată numită v-popover și două componente personalizate și anume și oferind flexibilitate dezvoltatorilor pentru a adăuga sfaturi de instrucțiuni în aplicația Vue.js.

Vue-Sugestie - Un plugin Vue.js care împachetează Hint.css. Funcțiile pluginului v-indiciu-css directivă pentru a adăuga sfat util. Aceasta aduce același set de opțiuni ca Hint.css, astfel încât să le puteți adăuga ca obiect JavaScript sau modificator Vue.js.

ReactJS

React Joyride - O componentă React pentru a afișa un set de instrucțiuni care vor îndrumați utilizatorii noi să vă familiarizați cu noua aplicație.

Reactați Floater - Această bibliotecă împachetează Popper.js într-o componentă React numită Floater, deci are aceleași caracteristici extraordinare ca Floater's. Puteți să adăugați un sfat și o fereastră pop-up, și puteți, de asemenea jucați cu această componentă prin această nisip.

React Autotip - O componentă simplă React cu caracteristica de poziționare automată, va fi automat ajustați automat poziția vârfului de instrument când spațiul disponibil din jurul acestuia se modifică.

React Tippy - Construit pe vârful Tippy.js și Popover.js. Această bibliotecă introduce a tooltip care componente puteți include în aplicația dvs. React.

React Sugestie - O componentă React care extinde Hint.css. Componentele adaugă câteva caracteristici care nu sunt disponibile în Hint.css cum ar fi poziția automată, întârziere și o funcție Callback.

Mai Mult

Emblemă - O componentă Ember.js pentru crearea de sfaturi, este construită pe partea de sus a Popper.js. Componenta este, de asemenea, concepută cu privire la accesibilitate și continuă să se îmbunătățească pentru a se conforma cu aproximativ 508 de complianță în această privință.

D3 Sfat - un plugin D3.js. D3.js este o bibliotecă JavaScript pentru vizualizarea datelor, cum ar fi diagrame, hărți, diagrame etc. Acest plugin vă permite să afișați un sfat util pe partea de sus a acestor date.