40+ Kasulikud tööriista skriptid CSS, JavaScript ja jQuery abil
Huvitav kasutajaliidese element, töövihikud (nimetatakse ka infotipsiteks) teevad väikese kasti, kui kuvatakse hiirekursor asub teatud tekstiga või pildiga üle selle kohta, milline element on hõljuv. Kasutuskogemust silmas pidades annavad töövahendid kasutajatele kõige kiirema ja lihtsaima teabeallika ilma midagi klõpsamata.
Kuigi lihtsaim viis tööriista lisamiseks tekstile on HTML-märgendi kasutamine või TITLE =””, ALT =””. Siiski on mõned väga lahedad Tooltipside kujundused ja stiilid, mida saate luua JavaScripti ja CSS abil kasutades tööriista skripte. Vaatame.
CSS
Balloon.css - Balloon on CSS raamatukogu koos SasS ja LESS interaktiivse tööriista näitamiseks. Tööriista sisu ja asukoht on seadistatav andmeid- atribuut. Saate näidata tööriista vasakule, paremale või vasakule paremale. Võite isegi lisage sisule Emojis. Balloon.css saab paigaldada NPM-i kaudu ja või laadida selle CDNJS-ist.
Simptip - Valmistatud SasS'iga, mis võimaldab ümberkonfigureerige ja kompileerige kood vastavalt oma nõudmistele. Tööriista asukoht ja sisu on seadistatav klassi nime ja data-tooltip atribuut. Simptip on saadaval kui NPM, Lõng ja Bower pakett.
Hint.css - Üks populaarsemaid CSS-raamatukogusid, mis näitavad tööriista, Hint.css-i kasutavad paljud populaarsed veebisaidid nagu Fiverr, Webflow ja Tridiv. Erinevalt teistest kahest CSS-raamatukogust, Hint.css kasutab aria-märgis Suuruse ja värvi saab seadistada klasside nimede kaudu kasutades BEM metoodikat. Hint.css on saadaval NPM, Bower ja CDNJS.
Microtip - Teine vinge CSS-raamatukogu, mis on loodud koos töövahendiga “Kättesaadavus” meeles, Microtip kasutab aria-märgis hoidma tööriista sisu ja andmeid- atribuut tööriista suuruse ja asukoha konfigureerimiseks.
See kasutab CSS-muutujat, mis võimaldab kohandada tööriista lihtsa ol 'CSS-failiga. CSS-muutujad on paljudes veebi- ja mobiilibrauserites juba toetatud. Microtip on saadaval NPM, lõnga paketina ja UNPkg CDN-na.
Wenk - See on vaid 733 baiti. Väga kerge raamatukogu kirjutatud super-kaasaegses CSS-is, kasutades CSSNext, LESS ja SCSS nii saate stiilid kohandada ja kompileerida nii, nagu soovite. Wenki saab alla laadida NPM-ist, lõngast ja järgmistest tasuta CDN-teenustest: rawgit.com ja unpkg.com.
Tooltippy - Teine kerge CSS-raamatukogu on umbes 1 KB suurune. Tooltippy sisaldab mitmeid eelnevalt tehtud teemasid tööriista kujundamiseks. See on kirjutatud CSS-i eelprotsessoritega Stylus. Vaadake juhiseid selle kohta, kuidas saate laiendada või kohandada neid teemasid.
Elegantsed kiired - See raamatukogu on varustatud mõne eelnevalt ehitatud teemad mida saab muuta antud klassi nimedega. Erinevalt teistest HTML5-le tuginevatest raamatukogudest andmeid- või aria-märgis atribuut, nõuab ElegantTips tööriista moodustamiseks lisanduvat elementi. See võimaldab teil lisage sõna otseses mõttes mis tahes sisu tööriista juurde lihtsast tekstist kaugemale.
Tootik - Mitte ainult see, et see CSS-raamatukogu pakub stiililehe CSS-, LESS- ja SasS-vormingus, siis pakub see ka hõlpsasti kasutatav GUI tööriista kohandamiseks. Selle tööriista loodud HTML-i saate lihtsalt kopeerida ja kleepida. See on nii lihtne.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS kaasas valikuvõimalusi tööriista konfigureerimiseks. Me saame kohandada animatsioone, tööriista noolt, laiust, suurust, teemat ja palju muud. Samuti pakub see tagasihelistamisfunktsioone, millega saate käivitage funktsioon, kui tööriista kuvatakse ja peidetakse. Need funktsioonid muudavad TippyJSi ühe meie võimsaid JavaScript-raamatukogusid, et luua töövihik.
Darsain Tooltip - See raamatukogu pakub tööriista põhifunktsiooni. Sellegipoolest pakub see ulatuslikke võimalusi tootipiirkonna käitumise seadistamiseks ja a klassi nimede komplekt tööriista välimuse muutmiseks. Tooltip toimib hästi vanemates brauserites nagu IE9 ja vajadusel IE8 mõne korrigeerimisega.
Bubb - Bubb sobib hästi arenenud JavaScripti kasutajatele. Selle kasutamine ulatuslikud API-d, välja arvatud lihtsa teksti kuvamine, saate programmipõhiselt lisada keerukama HTML-sisu. See on päris lahe; Te saate tutvuda dokumentidega näidetega.
Popper - Sisaldab tehnilist abstrakti, et luua midagi sellist “hüppab”, nagu tooltip, popover ja rippmenüüd. TippyJS kasutab seda raamatukogu sihtasutusena ja seda kasutavad veebis olevad suured nimed nagu Bootstrap, Microsoft ja Atlassian.
YY Tooltip - Erinevalt teistest raamatukogudest on YY Tooltip ei nõua HTML-elementi või atribuutide lisamist. See töötab täielikult JavaScripti ja sisu, positsiooni ja värvidega määratakse objektis HTML-elemendi asemel. See on täiuslik kasutamiseks koos täieliku JavaScripti veebirakendusega.
Position.js - Teine suurepärane emakeelena kasutatav JavaScripti teek, mis loob tööriistu, Position.js pakub funktsiooni konfigureerimiseks GUI-d ja seal genereeritud koodi lihtsalt kopeerima ja kleepima. Position.js-i saab kasutada koos React.js või Vue.js.
Bezet Tooltip - See raamatukogu pakub 14 võimalust tööriista näitamiseks; näiteks õigus, vasakule, põhja, vasakpoolne keskus, parempoolne, alumine keskus, jne. Lisaks sellele on see ka piisavalt nutikas, et see saaks kohandage tööriista positsiooni olemasoleva ruumi alusel ümbritsevad tööriista. Tutvu demoga.
MouseTip - See JavaScrtipt'i raamatukogu loob a tooltip, mis liigub kursori asukohta. Tooltip on konfigureeritud mittestandardsete hiirelõks- atribuut HTML5 asemel andmeid- atribuut. Mousetip on saadaval NPM-moodulina.
Internetipildid - Sarnaselt MousetTipiga on selle raamatukogu loodud töövihik järgib kursori asukohta. Kõik on konfigureeritud JavaScripti objekti asemel HTML ja atribuudid on ehitatud ka kaasaegsete brauserite jaoks. See on kerge ja kiire.
MTip - Tooltipi jaoks JavaScripti teek suurepärane brauseri ühilduvus. See on ühilduv IE8-ga, mis on täielikult kohandatav valikute kaudu, ning saate lisada Tooltipi mis tahes elemendile isegi img (pildielement).
Bubblesee - kerge JavaScripti raamatukogu, mis pakub a “tooltip”. JavaScripti teeki on lihtne kasutada väljundi kohandamiseks keeruliste võimalustega. Kui soovite muuta tööriista välimust, antakse Sass-fail. Tutvu demoga.
Tipfy - Ehitatud kaasaegse JavaScript-süntaksiga, ES6, Tipfy suurus on vaid 2 KB. Raamatukogu pakub kahte faili versiooni: tipfy.min.js skripti edastamine kaasaegne ES6 süntaks, ja tipfy.es5.min.js kui vajate ühilduvust vanemate brauseritega. See kasutab andmeid- atribuut tööriista kohandamiseks; the andmed-tipfy-side, näiteks kasutatakse tööriista suuna seadistamiseks ja kasutamiseks andmed-tipfy-tekst atribuut tööriista sisu lisamiseks.
jQuery
Tooltipster - See raamatukogu pakub ulatuslikke võimalusi, et kohandada peaaegu kõike, nagu näiteks teema, animatsioon, touch-tugi, sisu, avatud ja lähedane käivitus, Samuti pakub see kohandatud sündmuste kuulajat ja tagasikutsumist, mis võimaldavad arendajatel täiendada tööriista kohandatud funktsioonidega. Samuti on see jQuery plugin tooltip töötaks vanemas brauseris nagu IE6, sõltuvalt jQuery versioonist kasutatakse.
Protip - Teine ulatuslik jQuery plugin, Protip toetab 49 positsiooni, HTML tööriista sisu, ikoonide toe, kohandatud tagasihelistuste jaoks, ja palju muud. Protip pakub GUI-d, mis võimaldab hõlpsasti tööriista kohandada.
PowerTip - See jQuery plugin toob ka Valikud ja API-d, mis pakuvad arendajatele mitmeid erinevaid viise, kuidas rakendusi rakendada. See toetab klaviatuuri navigeerimine; hüpikakna tegemine elementidega navigeerimisel Tab klaviatuur. PowereTip on saadaval NPM-moodulina. Seda saab kasutada koos RequireJS ja Browserify.
Kättesaadav Aria Tooltip - Sisseehitatud funktsiooniga Accessibility, mis on sisseehitatud jQuery-pluginaga, on tööriista tüüp mõeldud näitama dialoogi, kus on pealkiri, teksti mitmekordne ja sulgemisnupp. See on meie enda nimekirjas.
TipsJS - Lihtne jQuery plugin, kuid see toob endaga kaasa üsna erilised omadused. The tööriista sisu on seadistatud a-ga data-tooltip atribuut. Veelgi enam on see, et me saame pakendada sisu erimärkidega, et vormindada Markdowni vorminguga sarnane sisu. Me saame kasutada * sisu muutmiseks julge, ~ kaldkirjas ja ^ rubriigi jaoks.
Dark Tooltip - See raamatukogu pakub mõningaid tõesti kasulikke funktsioone tööriista sisselülitamiseks. Näiteks saame lisada a Kinnita nupp - Jah ja Ei, pimendage tausta, kui tööriista kuvatakse, ja lisage HTML-elemente sisu. Ma arvan, et sa tõesti peaksid tutvuma demo lehega.
Aria Tooltip - Veel üks sisseehitatud juurdepääsetavuse funktsiooniga töövahend, see jQuery plugin on WAI-ARIA 1.1 ühilduv. See on tundlik viisil, mida saate pakkuda erinevaid vaateaknasuurusi erinevates konfiguratsioonides. Aria Tooltip on saadaval NPM-moodulina t-aria-tooltip.
Toolbar.js - Kui teine jQuery plugin võib näidata ainult lihtsa teksti või HTML-i sisu, siis seda jQuery plugin loob tööriistariba. Tooltip sisaldab kahte või enamat linki ikooniga, mis tavaliselt toiminguid teostab klõpsa, nagu iga tööriistariba. Vaadake dokumentatsiooni ja näiteid.
VueJS
V-Tooltip - V-Tooltip on Vue.js komponent, mida toetab kapuutsi all Popper.js. See annab a uus direktiiv v-tooltip mis saab lisada ükskõik millisele elemendile, et luua tööriista. The v-tooltip võivad sisaldada tööriista sisu või Valikud. Lisaks tavale v-tooltip saate lisada ka tööriista v-popover komponent. Selle komponendiga saate lisage tööriista keerulisem sisu komponent Vue.js või HTML.
Vue-Bulma Tooltip - Bulli UI raamistikule tugineva tööriista loomiseks mõeldud komponent Vue.js. See raamatukogu on Vue Bulma osa. Kuid tooltip komponent on saadaval nimega NPM-moodul vue-bulma-tooltip seda saab kasutada eraldiseisvate komponentidena.
Vue-direktiivi-Tooltip - Üldiselt on see sarnane V-Tooltipi komponendiga, mis põhineb Popper.js-il ja annab sama direktiivi v-tooltip. Siiski ei näi see ette v-popover komponent.
Vue-Tippy - See raamatukogu ümbritseb Tippy.jsi Vue.js komponendiks. See sisaldab kohandatud Vue.js direktiivi kutsutakse v-tippy mis toimib nagu HTML-atribuut; saame lisada tööriista või sisu kohandamise võimalusi. Samuti muudab see a kohandatud Vue.js-komponent tööriista sisus, kasutades html valik.
VueJS-Popover - Kohandatud Vue.js koos kohandatud direktiiviga v-popover ja kaks kohandatud komponenti
Vue-Hint - Hint.css ümbritsev Vue.js plugin. Plugina funktsioonid v-vihje-css vahendi lisamiseks. See toob samasugused valikud nagu Hint.css, nii saate need lisada JavaScript-objektina või Vue.js-i modifikaatorina.
ReactJS
Reageeri Joyride - React-komponent, et kuvada tööriistavide kogum, mida saate juhendage uusi kasutajaid oma uue rakendusega tutvumiseks.
Reageerib Floater - See raamatukogu pakib Popper.js'i React komponendiks nimega Floater, nii et sellel on samad suurepärased funktsioonid nagu Floater. Saate lisada tööriista ja hüpikakna ning ka mängida selle komponendiga läbi selle liivakasti.
Reaktsioon reageerib - Lihtne React komponent, millel on automaatne positsioneerimisfunktsioon reguleerib automaatselt tööriista positsiooni kui selle ümber olev ruum muutub.
Reageeri Tippy'ga - Ehitatud peal Tippy.js ja Popover.js. See raamatukogu tutvustab a Tooltip komponent saate lisada rakendusse React.
Reageeri vihje - Reaktiivkomponent, mis laiendab Hint.css. Komponendid lisavad mõned funktsioonid, mida Hint.css ei ole saadaval, näiteks automaatne asend, viivitus ja tagasihelistamise funktsioon.
Veel
Emberi tööriistad - Ember.js komponent tööriistade loomiseks, see on üles ehitatud Popper.js. Komponent on mõeldud silmas pidades ka juurdepääsetavust ja see parandab endiselt, et see vastaks umbes 508 nõuetele.
D3 Näpunäide - D3.js plugin. D3.js on JavaScripti raamatukogu andmete visualiseerimiseks nagu kaardid, kaardid, diagrammid jne. See plugin võimaldab teil näidata tööriista nende andmete peale.
