40+ Korisni opisi skripti s CSS-om, JavaScript-om i jQuery-jem
Zanimljiv element korisničkog sučelja, alati (koji se nazivaju i infotips) čine malu kutiju kada se pojavi pokazivač miša lebdi iznad određenog teksta ili slike s informacijama što se tiče elementa koji lebdi iznad. U smislu korisničkog iskustva, opisi alata korisnicima pružaju najbrži i najjednostavniji izvor informacija bez da kliknete na bilo što.
Iako je najjednostavniji način dodavanja opisa teksta vašem HTML-u upotreba HTML oznake ili TITLE =””, alt =””. Međutim, postoje neki stvarno cool opise i stilove koje možete stvoriti pomoću JavaScripta i CSS-a pomoću skripti alata. Pogledajmo.
CSS
Balloon.css - Balon je CSS knjižnica sastavljen sa SasS i LESS da biste prikazali interaktivni opis alata. Sadržaj i položaj opisa alata mogu se konfigurirati putem podaci- atribut. Možete prikazati opis alata lijevo, desno ili lijevo-desno. Možete čak i dodajte Emojis u sadržaj. Balloon.css se može instalirati preko NPM-a i učitati s CDNJS-a.
Simptip - Izrađeno pomoću SasS-a koji omogućuje Ponovno konfigurirajte i rekompajlirajte kôd tako da odgovara vašem zahtjevu. Položaj i sadržaj alata opisuju se pomoću naziva klase i Podaci-opis atribut. Simptip je dostupan kao NPM, pređa i paket Bower.
Hint.css - Jedan od popularnih CSS knjižnica za prikaz alarma, Hint.css koriste mnoge popularne web-lokacije kao što su Fiverr, Webflow i Tridiv. Za razliku od druge dvije CSS knjižnice, Hint.css koristi arija oznaka Možete konfigurirati veličinu i boju kroz nazive klasa metodologijom BEM-a. Hint.css je dostupan na NPM, Bower i CDNJS.
mikrotip - Još jedan strašan CSS knjižnica za stvaranje tooltip izgrađen sa “Pristupačnost” na umu, Microtip namjene arija oznaka i držite sadržaj alata podaci- atribut za konfiguriranje veličine i položaja alata.
Ona koristi CSS varijablu koja vam omogućuje da prilagodite tooltip sa samo običan ol 'CSS datoteku. CSS varijable su već podržane u mnogim web i mobilnim preglednicima. Microtip je dostupan kao NPM, paket pređe i UNPkg CDN.
Wenk - To je samo 733 bajta. Super lagana knjižnica napisan u super-modernom CSS-u koji koristi CSSNext, LESS i SCSS tako možete prilagoditi i rekompilirati stilove onako kako želite. Wenk se može preuzeti s NPM-a, Pređe i sljedećih besplatnih CDN usluga: rawgit.com i unpkg.com.
Tooltippy - Još lagana CSS knjižnica veličine oko 1 KB. Tooltippy uključuje nekoliko unaprijed pripremljenih tema za oblikovanje alata. Napisan je s CSS pre-procesorima po imenu Stylus. Pogledajte upute o tome kako možete proširiti ili prilagoditi te teme.
ElegantTips - Ova knjižnica dolazi s nekoliko unaprijed izrađene teme koje se mogu promijeniti s navedenim nazivima klasa. Za razliku od drugih knjižnica koje se oslanjaju na HTML5 podaci- ili arija oznaka Atribut, ElegantTips zahtijeva dodatni element koji se dodaje u obliku opisa alata. To vam omogućuje dodati doslovno bilo koji sadržaj u tooltip izvan jednostavnog teksta.
Tootik - Ne samo da ova CSS knjižnica daje stylsheet u CSS, LESS i SasS formatu, ona također pruža jednostavan za korištenje GUI za prilagodbu opisa alata. Možete jednostavno kopirati i zalijepiti HTML koji generira ovaj alat. To je tako jednostavno.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS dolazi s obilje opcija za konfiguriranje opisa alata. Možemo prilagoditi animacije, strelicu alata, širinu, veličinu, temu i još mnogo toga. On također omogućuje funkcije povratnog poziva pomoću kojih možete izvršiti funkciju kada je prikazan i sakriven opis alata. Ove značajke čine TippyJS jednim od naših moćnih JavaScript biblioteka na našem popisu za izradu tooltipa.
Darsain Tooltip - Ova knjižnica pruža osnovnu implementaciju alata. Ipak, pruža opsežne opcije za konfiguriranje tootipskog ponašanja i skup naziva klasa za promjenu izgleda alata. Tooltip dobro radi u starijim preglednicima kao što je IE9 i, ako je potrebno, IE8 s nekoliko prilagodbi.
Bubb - Bubb može biti prikladan za napredne korisnike JavaScripta. Koristeći njegov opsežnih API-ja, osim prikazivanja jednostavnog teksta, programski možete dodati složeniji HTML sadržaj u opis alata. Prilično je cool; možete pogledati dokumente u primjerima.
Popper - Sadrži tehničku apstrakciju za stvaranje nečega “cura”, kao što je tooltip, popover i drop-downs. TippyJS ga koristi kao temelj knjižnice i koriste ga velika imena na webu, kao što su Bootstrap, Microsoft i Atlassian.
YY Tooltip - Za razliku od ostalih knjižnica, YY Tooltip ne zahtijeva dodavanje HTML elementa ili atributa. U potpunosti radi s JavaScriptom, a sadržaj, položaj i boje definirani su u Objektu umjesto u HTML elementu. Savršen je za korištenje u kombinaciji s potpunom web-aplikacijom za JavaScript.
Position.js - Još jedna izvrsna izvorna JavaScript biblioteka za izradu opisa alata, Position.js pruža GUI za konfiguriranje funkcije i jednostavno kopirajte i zalijepite generirani kod. Position.js se može koristiti zajedno s React.js ili Vue.js.
Opcija Tooltet - Ova knjižnica pruža 14 opcija za prikaz opisa alata; kao što je na pravo, lijevo, dno, lijevi centar, desni kraj, Dno centar, itd. Povrh toga, također je dovoljno pametan da može prilagodite položaj opisa alata na temelju dostupnog prostora koji okružuje opis alata. Pogledajte demo.
MouseTip - Ova knjižnica JavaScrtipt stvorit će opis alata koji će se pomicati duž položaja pokazivača. Opis alata konfiguriran je s nestandardnim mousetip- umjesto HTML5 podaci- atribut. Mousetip je dostupan kao NPM modul.
Internetips - Vrlo slično MousetTip-u, alatu koji generira ova knjižnica slijedi položaj pokazivača. Sve je konfigurirano putem JavaScript objekta umjesto HTML-a i Atributi su također izgrađeni za moderne preglednike. Lagan je i brz.
MTip - JavaScript biblioteka za Tooltip s izvrsna kompatibilnost preglednika. To je kompatibilan s IE8, potpuno prilagodljiv kroz Opcije, i možete dodati Tooltip na bilo koji element čak i na img (element slike).
Bubblesee - lagana JavaScript biblioteka koja pruža jednostavnu funkcionalnost “tooltip”. Knjižnica JavaScripta je jednostavna za korištenje bez kompliciranih opcija za prilagodbu izlaza. Datoteka Sass je dostupna ako želite promijeniti izgled alata. Pogledajte demo.
Tipfy - Izgrađen je uz modernu JavaScript sintaksu, ES6, Tipfy je veličine samo 2 KB. Knjižnica nudi dvije verzije datoteka: tipfy.min.js pružanje skripte moderna ES6 sintaksa, i tipfy.es5.min.js ako trebate kompatibilnost sa starijim preglednicima. Ona koristi podaci- da biste prilagodili opis alata; Podaci-tipfy strani, na primjer, koristi se za postavljanje smjera alata i korištenje podataka tipfy tekst atribut za dodavanje sadržaja alata.
jQuery
Tooltipster - Ova biblioteka pruža opsežne mogućnosti za prilagodbu gotovo svega kao što je tema, animacija, podrška za dodir, sadržaj, okidač otvoren i zatvoren, itd. On također pruža prilagođene slušatelje događaja i povratne pozive omogućujući programerima da prošire tooltip pomoću prilagođenih funkcija. Također, kao jQuery plugin, tooltip će raditi u starijim pregledniku kao što je IE6 ovisno o jQuery verziji se koristi.
Protip - Još jedan opsežan jQuery dodatak, Protip podržava 49 pozicija, HTML za sadržaj alata, podršku za ikone, prilagođene povratne pozive, i još mnogo toga. Protip pruža GUI omogućujući vam da prilagodite tooltip s lakoćom.
PowerTip - Ovaj plugin jQuery također donosi opcije i API-jeve koji programerima nude brojne različite načine za implementaciju opisa alata. Podržava navigacija pomoću tipkovnice; kada se pojavljuje skočni prozor prilikom navigacije elemenata s kartica tipkovnica. PowereTip je dostupan kao NPM modul. Može se koristiti s RequireJS i Browserify.
Dostupan Aria Tooltip - Dodatak jQuery s ugrađenom značajkom pristupačnosti je alatni opis dizajniran za prikaz dijaloškog okvira s naslovom, višelinijskim tekstom i gumbom za zatvaranje. Jedna je od naših na našem popisu.
TipsJS - Jednostavan jQuery dodatak, ali donosi vrlo karakteristične značajke. Sadržaj opisa alata postavljen je s Podaci-opis atribut. Štoviše, možemo i omotati sadržaj s posebnim znakovima da bismo formatirali sadržaj sličan Markdown formatiranju. Možemo koristiti * kako bi sadržaj bio podebljan, ~ za kurziv i ^ za naslov.
Dark Tooltip - Ova knjižnica pruža neke stvarno korisne značajke za uključivanje alata. Na primjer, možemo dodati a gumb za potvrdu - Da i Ne, zatamnite pozadinu dok je prikazan opis alata i dodajte HTML elemente na sadržaj. Mislim da bi trebao provjeriti demo stranicu.
Aria Tooltip - Još jedan tooltip s ugrađenom značajkom pristupačnosti, ovaj jQuery dodatak je sukladan s WAI-ARIA 1.1. Odgovara na način koji možete pružaju različite konfiguracije za različite veličine prikaza. Aria Tooltip je dostupna kao NPM modul pod nazivom t-arija-opis.
Toolbar.js - Dok drugi jQuery dodatak može prikazivati samo jednostavni tekst ili HTML sadržaj u opisu alata, ovo jQuery plugin stvara alatnu traku. Savjet će sadržavati dvije ili više veza s ikonom koja će obično izvršiti radnju klik, poput bilo koje alatne trake. Pogledajte dokumentaciju i primjere.
VueJS
V-Opis - V-Tooltip je komponenta Vue.js koju pokreće Popper.js ispod haube. Pruža a imenovana nova direktiva v-opis koji se može dodati bilo kojem elementu da bi se stvorio opis alata. v-opis može sadržavati sadržaj opisa alata ili Opcije. Osim običaja v-opis Možete dodati i opis alata sa v-skočne prozore komponenta. S ovom komponentom možete dodajte složeniji sadržaj u opis alata s komponentom Vue.js ili HTML-om.
Vue-Bulma Tooltip - Komponenta Vue.js za izradu tooltipa na temelju Bulma UI okvira. Ova knjižnica je dio komponente Vue Bulma. Ali Komponenta tooltip je dostupna kao NPM modul pod nazivom vue-Bulma-opis to možete koristiti kao samostalne komponente.
Vue-Direktiva-Tooltip - Sveukupno je sličan V-Tooltip komponenti baziranoj na Popper.js i nudi istu direktivu v-opis. Međutim, čini se da ne pruža v-skočne prozore sastavni dio.
Vue-Tippy - Ova knjižnica omotava Tippy.js u komponentu Vue.js. Ima prilagođenu Vue.js direktivu v-tippy koja radi kao HTML atribut; možemo dodati sadržaj za tooltip ili opcije za prilagodbu. Također čini a prilagođena komponenta Vue.js na sadržaju opisa alata pomoću alata hTML opcija.
VueJS-skočne prozore - Prilagođeni Vue.js s prilagođenom naredbom v-skočne prozore i dvije prilagođene komponente, naime
Vue-savjet - Vue.js dodatak koji obavija Hint.css. Značajke dodatka v-savjet-CSS direktiva za dodavanje opisa alata. To donosi isti skup opcija kao i Hint.css, tako da ih možete dodati kao JavaScript objekt ili Vue.js modifikator.
ReactJS
Reagirajte Joyride - Komponenta React za prikaz skupa opisa alata koji će uputite nove korisnike da se upoznaju s vašom novom aplikacijom.
Reagirajte na plovku - Ova knjižnica oblaže Popper.js u React komponentu po imenu Floater, tako da ima iste sjajne značajke kao Floater. Možete dodati tooltip i popup, a također možete poigrajte se s ovom komponentom kroz ovaj pješčanik.
Reagirajte Autotip - Jednostavna React komponenta sa značajkom automatskog pozicioniranja, eact Autotip će automatski podesiti položaj opisa alata kada se slobodni prostor oko njega promijeni.
Reagirajte Tippy - Izgrađen na vrhu Tippy.js i Popover.js. Ova knjižnica predstavlja a Opis komponenta možete uključiti u svoju aplikaciju React.
Reagirajte savjet - Reagentna komponenta koja proširuje Hint.css. Komponente dodaju nekoliko značajki koje nisu dostupne u Hint.css kao što je automatsko pozicioniranje, kašnjenje i funkcija povratnog poziva.
Više
Ember Tooltips - Ember.js komponenta za izradu opisa alata, ona je izgrađena na vrhu Popper.js. Komponenta je također dizajnirana s obzirom na pristupačnost i stalno se poboljšava u skladu s oko 508 usklađenosti u ovom pitanju.
D3 Savjet - dodatak za D3.js. D3.js je JavaScript biblioteka za vizualizaciju podataka kao što su grafikoni, karte, dijagrami itd. Ovaj dodatak omogućuje prikaz alarma na vrhu tih podataka.
