40+ Naudingi įrankių scenarijai su CSS, „JavaScript“ ir „jQuery“
Įdomus UI elementas, įrankių patarimai (taip pat vadinami infotips) sudaro mažą langelį, kai atsiranda pelės žymeklis yra nukreiptas virš tam tikro teksto ar vaizdo su informacija apie elementą, kuriam buvo pritvirtinta. Kalbant apie naudotojo patirtį, įrankių patarimai suteikia naudotojams greičiausią ir lengviausią informacijos šaltinį nereikia spustelėti nieko.
Nors paprasčiausias būdas pridėti įrankių patarimus tekstui yra naudoti HTML žymą arba TITLE =””, ALT =””. Tačiau yra keletas tikrai vėsių įrankių patarimai ir stiliai, kuriuos galite sukurti su „JavaScript“ ir „CSS“ naudojant įrankių tipų scenarijus. Pažiūrėkime.
CSS
Balloon.css - Balionas yra CSS biblioteka sudarytas iš SasS ir LESS rodyti interaktyvų įrankį. Įrankio įrankio turinys ir padėtis yra konfigūruojami per duomenis- atributas. Galite parodyti įrankio įrankį kairėje, dešinėje ar kairėje dešinėje. Jūs netgi galite pridėkite Emojis į turinį. Balloon.css galima įdiegti per NPM ir įkelti jį iš CDNJS.
Simptip - Pagaminta su SasS, leidžiančia pakeiskite kodą, kad jis atitiktų jūsų reikalavimus. Tooltip pozicija ir turinys yra konfigūruojami per klasės pavadinimą ir duomenų įrankių įrankis atributas. Simptip yra prieinamas kaip NPM, verpalai ir „Bower“ paketai.
Hint.css - Vienas iš populiarių CSS bibliotekų, rodančių įrankių tipą, „Hint.css“ naudojamas daugelyje populiarių svetainių, pvz., „Fiverr“, „Webflow“ ir „Tridiv“. Skirtingai nuo kitų dviejų CSS bibliotekų, „Hint.css“ naudoja aria-etiketė Galite konfigūruoti dydį ir spalvą per klasės pavadinimus naudojant BEM metodiką. „Hint.css“ galima rasti „NPM“, „Bower“ ir „CDNJS“.
Microtip - Dar viena nuostabi CSS biblioteka, sukurta naudojant „Tooltip“ “Prieinamumas” turint omenyje, Microtip naudoja aria-etiketė laikyti įrankio įrankio turinį ir duomenis- atributas, skirtas konfigūruoti įrankio taško dydį ir padėtį.
Jis naudoja CSS kintamąjį, kuris leidžia jums pritaikyti įrankių tipą su paprastu „CSS“ failu. CSS kintamieji jau yra palaikomi daugelyje interneto ir mobiliųjų naršyklių. „Microtip“ galima įsigyti kaip NPM, verpalų paketas ir UNPkg CDN.
Wenk - Tai tik 733 baitai. Itin lengva biblioteka parašyta super moderniame CSS, naudojant CSSNext, LESS ir SCSS taigi galite pritaikyti ir perskaičiuoti stilius taip, kaip norite. „Wenk“ galima atsisiųsti iš NPM, siūlų ir šių nemokamų CDN paslaugų: rawgit.com ir unpkg.com.
„Tooltippy“ - Kitas lengva CSS biblioteka yra maždaug 1 KB dydžio. „Tooltippy“ apima kelias iš anksto parengtas temas įrankių kūrimui. Jis parašytas su CSS išankstiniais procesoriais, pavadintais „Stylus“. Žr. Instrukcijas, kaip galite išplėsti arba pritaikyti šias temas.
Elegantiški pirštai - Šią biblioteką sudaro keletas iš anksto sukurtų temų kuri gali būti pakeista su pateiktais klasės pavadinimais. Skirtingai nuo kitų bibliotekų, kurios remiasi HTML5 duomenis- arba aria-etiketė atributas, „ElegantTips“ reikalauja papildomo elemento, į kurį įeina įrankis. Tai leidžia jums tiesiog pridėti bet kokį turinį prie įrankio patarimo už paprasto teksto.
Tootik - Ne tik tai, kad ši CSS biblioteka pateikia stiliaus lapą CSS, LESS ir SasS formatu, ji taip pat suteikia paprasta naudoti GUI, kad pritaikytumėte įrankio įrankį. Galite tiesiog nukopijuoti ir įklijuoti šio įrankio sukurtą HTML. Tai taip paprasta.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS ateina su galimybių konfigūruoti įrankių tipą gausa. Galime pritaikyti animacijas, rodyklės rodyklę, plotį, dydį, temą ir daug daugiau. Ji taip pat suteikia atgalinio ryšio funkcijas, su kuriomis galite atlikite funkciją, kai rodomas ir paslėptas įrankio įrankis. Dėl šių funkcijų „TippyJS“ yra viena iš mūsų galingų „JavaScript“ bibliotekų mūsų sąraše, kad sukurtume įrankių tipą.
Darsain Tooltip - Ši biblioteka suteikia pagrindinį įrankio įrankio įgyvendinimą. Vis dėlto jame pateikiamos išsamios parinktys, kaip sukonfigūruoti gaminio elgesį ir a rinkinys klasės pavadinimų, kad pakeistumėte įrankių patarimų išvaizdą. „Tooltip“ gerai veikia senesnėje naršyklėje, pvz., IE9 ir, jei reikia, IE8 su keliais koregavimais.
Bubb - „Bubb“ gali būti gerai pritaikytas pažangiems „JavaScript“ vartotojams. Naudojant jo platus API, išskyrus paprastą tekstą, galite programiniu būdu pridėti sudėtingesnį HTML turinį į įrankių tipą. Tai gana kietas; galite peržiūrėti pavyzdžius.
Popperis - Sudėtyje yra techninė abstrakcija, kuria sukuriama kažkas “pasirodo”, kaip įrankių įrankis, popover ir išskleidžiamajame meniu. „TippyJS“ jį naudoja kaip bibliotekos fondą ir naudoja dideli vardai internete, pvz., „Bootstrap“, „Microsoft“ ir „Atlassian“.
YY Tooltip - Skirtingai nuo kitų bibliotekų, YY Tooltip nereikalauja pridėti HTML elemento ar atributų. Jis veikia visiškai su „JavaScript“, o turinys, pozicija ir spalvos yra apibrėžtos Objekte, o ne HTML elemente. Tai puikiai tinka naudoti kartu su visa „JavaScript“ žiniatinklio programa.
Position.js - Kita puiki vietinė „JavaScript“ biblioteka, skirta kurti įrankių patarimus, Position.js suteikia GUI, kad sukonfigūruotų funkciją ir paprasčiausiai nukopijuokite ir įklijuokite jame sukurtą kodą. Position.js gali būti naudojamas kartu su React.js arba Vue.js.
Bezet Tooltip - Pateikiama ši biblioteka 14 parinkčių, kad būtų rodomas įrankio patarimas; pvz., teisė, kairėje, apačioje, kairysis centras, dešinėje pusėje, apačioje, ir tt Be to, jis taip pat pakankamai protingas, kad galėtų reguliuoti įrankio taško padėtį pagal turimą erdvę aplink įrankį. Patikrinkite demonstraciją.
MouseTip - Ši „JavaScrtipt“ biblioteka sukurs a įrankių patarimas, kuris bus perkeliamas palei žymeklio padėtį. „Tooltip“ yra sukonfigūruotas nestandartiniu būdu pelėda- atributas vietoj HTML5 duomenis- atributas. „Mousetip“ yra prieinamas kaip NPM modulis.
Internetai - Gana panašus į „MousetTip“, šios bibliotekos sukurtas įrankis seka žymeklio padėtį. Viskas konfigūruojama naudojant „JavaScript“ objektą, o ne HTML ir atributai taip pat yra sukurti šiuolaikinėms naršyklėms. Tai lengvas ir greitas.
MTip - „Tooltip“ su „JavaScript“ biblioteka puikus naršyklės suderinamumas. Jis yra suderinamas su IE8, pilnai pritaikomas per parinktis, ir jūs galite pridėti „Tooltip“ bet kuriam elementui net ir ant img (vaizdo elementas).
Burbulai - lengva „JavaScript“ biblioteka, kuri suteikia tiesioginę a “įrankis”. „JavaScript“ biblioteką lengva naudoti be sudėtingų parinkčių, kad būtų galima pritaikyti išvestį. „Sass“ failas pateikiamas, jei norite keisti įrankio patarimo išvaizdą. Patikrinkite demonstraciją.
Tipfy - Sukurta su šiuolaikine „JavaScript“ sintakse, ES6, Tipfy yra tik 2 KB dydžio. Biblioteka pateikia dvi failų versijas: tipfy.min.js scenarijaus teikimas moderni ES6 sintaksė, ir tipfy.es5.min.js jei reikia suderinamumo su senesnėmis naršyklėmis. Jis naudoja duomenis- atributas, skirtas pritaikyti įrankį; duomenų-tipfy pusėje, Pavyzdžiui, naudojamas įrankio taško krypties nustatymui ir naudojimui duomenų-tipfy-tekstas atributas, skirtas pridėti įrankio įrankio turinį.
jQuery
„Tooltipster“ - Ši biblioteka suteikia daug galimybių pritaikyti beveik viską, pvz tema, animacija, prisilietimas, turinys, atviras ir glaudus paleidiklis, Tai taip pat suteikia pasirinktinį įvykių klausytoją ir pakvietimus, leidžiančius kūrėjams išplėsti įrankio įrankį su pasirinktomis funkcijomis. Be to, yra jQuery įskiepis Tooltip veiktų senesnėje naršyklėje kaip IE6, priklausomai nuo jQuery versijos naudojama.
Protip - Kitas platus jQuery įskiepis, Protip palaiko 49 pozicijas, HTML įrankių turinio, piktogramos palaikymo, pasirinktinių atšaukimų HTML, ir daug daugiau. „Protip“ suteikia GUI, leidžiančią jums lengvai pritaikyti įrankį.
„PowerTip“ - Šis „jQuery“ papildinys taip pat suteikia „Options“ ir „API“, teikiančias kūrėjams įvairius būdus, kaip įgyvendinti įrankių patarimus. Jis palaiko klaviatūros navigacija; iššokantį langą rodant naršant elementus su Tab klaviatūra. PowereTip yra prieinama kaip NPM modulis. Jis gali būti naudojamas su „RequireJS“ ir „Browserify“.
Prieinama „Aria Tooltip“ - Įdiegtas jQuery įskiepis, kuriame įdiegta „Accessibility“ funkcija skirtas rodyti dialogo langą su pavadinimu, teksto eilutėmis ir uždarymo mygtuku. Tai yra vienas iš mūsų sąraše.
PatarimaiJS - Paprastas jQuery įskiepis, tačiau jis atneša gana išskirtinius bruožus. The „Tooltip“ turinys nustatomas su a duomenų įrankių įrankis atributas. Dar daugiau yra tai, kad mes taip pat galime suvynioti turinį su specialiais simboliais, kad formatuotume turinį, panašų į „Markdown“ formatavimą. Galime naudoti * kad turinys būtų drąsus, ~ už kursyvą ir ^ pozicijai.
„Dark Tooltip“ - Ši biblioteka suteikia keletą tikrai naudingų funkcijų, kad įjungtumėte įrankio įrankį. Pavyzdžiui, galime pridėti a patvirtinimo mygtukas - Taip ir Ne, nubrėžkite foną, kai rodomas įrankis, ir pridėkite HTML elementų turinio. Manau, kad iš tikrųjų turėtumėte patikrinti demo puslapį.
Aria Tooltip - Kitas įrankis su integruotu prieinamumo funkcija, šis jQuery įskiepis yra suderinamas su WAI-ARIA 1.1. Jis reaguoja taip, kaip galite pateikti skirtingas skirtingų peržiūros srities dydžių konfigūracijas. Aria Tooltip yra prieinamas kaip NPM modulis t-aria-tooltip.
Toolbar.js - Nors kitas „jQuery“ papildinys gali rodyti tik paprastą teksto ar HTML turinį įrankių žinute, tai jQuery įskiepiai sukuria įrankių juostą. Į įrankių patarimą būtų įtrauktos dvi ar daugiau nuorodų su piktograma, kuri paprastai atliks veiksmą spustelėkite, kaip bet kuri įrankių juosta. Peržiūrėkite dokumentus ir pavyzdžius.
VueJS
V-Tooltip - V-Tooltip yra „Vue.js“ komponentas, maitinamas „Popper.js“ po gaubtu. Ji numato a nurodyta nauja direktyva v-tooltip kuris gali būti pridedamas prie bet kurio elemento, kad būtų sukurtas įrankis. The v-tooltip gali būti įrankio įrankio turinys arba parinktys. Be papročio v-tooltip taip pat galite pridėti įrankio įrankį su v-popover komponentas. Naudodami šį komponentą galite pridėti sudėtingesnį turinį į įrankių tipą su Vue.js komponentu arba HTML.
„Vue-Bulma Tooltip“ - „Vue.js“ komponentas, skirtas „Bulma UI Framework“ pagrindu sukurti „Tooltip“. Ši biblioteka yra Vue Bulma komponentas. Bet „Tooltip“ komponentas yra kaip NPM modulis vue-bulma-tooltip kad tai galite naudoti kaip atskirus komponentus.
Vue-direktyvos-Tooltip - Apskritai tai panaši į „V-Tooltip“ komponentą, pagrįstą „Popper.js“ ir pateikia tą pačią direktyvą v-tooltip. Tačiau neatrodo, kad tai būtų v-popover komponentas.
Vue-Tippy - Ši biblioteka „Tippy.js“ į „Vue.js“ komponentą. Jame yra pasirinkta Vue.js direktyva v-tippy kuris veikia kaip HTML atributas; mes galime pridėti turinį, skirtą įrankių rinkiniui arba parinktims, kaip ją pritaikyti. Jis taip pat suteikia a pasirinktinį Vue.js komponentą įrankio įrankio turiniui naudojant html parinktis.
VueJS-Popover - Priskirtas pasirinktinis Vue.js su pasirinkta direktyva v-popover ir du individualūs komponentai
Vue-Hint - „Vue.js“ įskiepis, apimantis „Hint.css“. Įskiepio funkcijos v-hint-css direktyvoje, kad pridėtumėte įrankį. Tai suteikia tokias pačias galimybes kaip ir „Hint.css“, todėl galite juos pridėti kaip „JavaScript“ objektą arba „Vue.js“ modifikatorių.
ReactJS
Reaguoti Joyride - React komponentas, rodantis įrankių tipų rinkinį padės naujiems vartotojams susipažinti su nauja programa.
React Floater - Ši biblioteka supakuoja Popper.js į „React“ komponentą, pavadintą „Floater“, todėl ji turi tokias pačias puikias funkcijas kaip „Floater“. Jūs galite pridėti įrankių patarimą ir iššokantį langą, taip pat galite žaisti su šiuo komponentu per šį smėlio dėžutę.
React Autotip - Paprastas „React“ komponentas su automatinio pozicionavimo funkcija, „Autotipas“ automatiškai reguliuoti įrankio taško padėtį kai pasikeičia turima erdvė aplink ją.
Reaguokite Tippy - Pastatytas ant Tippy.js ir Popover.js. Ši biblioteka pristato a „Tooltip“ komponentas galite įtraukti į „React“ programą.
Reaguokite į užuominą - Reagavimo komponentas, pratęsiantis Hint.css. Komponentai prideda keletą funkcijų, kurių nėra „Hint.css“, pvz., automatinės padėties, uždelsimo ir atgalinio ryšio funkcijos.
Daugiau
Žmogaus įrankių tipai - „Cilvē.js“ komponentas, skirtas įrankių tipams sukurti, yra pastatytas ant „Popper.js“. Komponentas taip pat yra suprojektuotas naudojant „Accessibility“ ir nuolat tobulėja, kad būtų laikomasi maždaug 508 reikalavimų šiuo klausimu.
D3 Patarimas - „D3.js“ įskiepis. „D3.js“ yra „JavaScript“ biblioteka, skirta duomenų vizualizavimui, pvz., Diagramoms, žemėlapiams, diagramoms ir kt..
