40+ Hyödyllisiä työkalutyyppejä, joissa on CSS, JavaScript ja jQuery
Mielenkiintoinen UI-elementti, työkaluvihjeitä (kutsutaan myös infotipsiksi) tekevät pienestä laatikosta, kun hiiren kohdistin on tietyn tekstin tai kuvan yli siitä, mitä elementtiä on siirretty. Käyttökokemuksen perusteella työkaluvihjeet antavat käyttäjille nopeimman ja helpoimman tietolähteen ilman mitään napsautusta.
Vaikka yksinkertaisin tapa lisätä työkaluvihjeitä tekstiin on käyttää HTML-tagia tai TITLE =””, alt =””. On kuitenkin joitakin todella viileitä Tooltips-mallit ja -tyylit, jotka voit luoda JavaScriptin ja CSS: n avulla käyttämällä työkaluvihjeitä. Katsotaanpa.
CSS
Balloon.css - Ilmapallo on CSS-kirjasto koostuu SasS ja LESS näyttää vuorovaikutteisen työkaluvihje. Työkalupiirin sisältö ja sijainti voidaan konfiguroida data- ominaisuus. Voit näyttää työkaluvihje vasemmalla, oikealla tai vasemmalla oikealla. Voit jopa lisää Emojis sisältöön. Balloon.css voidaan asentaa NPM: n kautta ja tai ladata se CDNJS: stä.
Simptip - Valmistettu SasS: n avulla konfiguroi ja käännä koodi uudelleen vastaamaan vaatimusta. Työkalupiirin sijainti ja sisältö on määritettävissä luokan nimellä ja data-vihjeteksti ominaisuus. Simptip on saatavilla NPM-, Lanka- ja Bower-paketti.
Hint.css - Yksi suosituimmista CSS-kirjastoista, joilla näytetään työkaluvihje, Hint.css: ää käyttävät monet suositut sivustot, kuten Fiverr, Webflow ja Tridiv. Toisin kuin kaksi muuta CSS-kirjastoa, Hint.css käyttää Aria-label Voit määrittää koon ja värin luokan nimien kautta käyttäen BEM-menetelmää. Hint.css on saatavana NPM, Bower ja CDNJS.
mikrokärjellä - Toinen mahtava CSS-kirjasto, jolla luodaan työkaluvihje “saavutettavuus” mielessä, Microtip käyttötarkoitukset Aria-label pitämään työkalupiirin sisältöä ja data- määrite, jonka avulla voit määrittää työkalutyypin koon ja sijainnin.
Se käyttää CSS-muuttujaa, jonka avulla voit muokata työkaluvihjeitä vain tavallisella CSS-tiedostolla. CSS-muuttujia on jo tuettu monissa web- ja mobiiliselaimissa. Microtip on saatavana NPM-, lanka- ja UNPkg-CDN: nä.
Wenk - Se on vain 733 tavua. Erittäin kevyt kirjasto kirjoitettu super-modernissa CSS: ssä käyttäen CSSNext-, LESS- ja SCSS-tiedostoja joten voit muokata ja kääntää tyylit haluamallasi tavalla. Wenkin voi ladata NPM: stä, langasta ja seuraavista ilmaisista CDN-palveluista: rawgit.com ja unpkg.com.
Tooltippy - toinen kevyt CSS-kirjasto on vain noin 1 kB: n kokoinen. Tooltippy sisältää useita ennalta laadittuja teemoja työkalutyypin muotoiluun. Se on kirjoitettu CSS-esiprosessoreilla nimeltä Stylus. Katso ohjeet siitä, miten voit laajentaa tai muokata näitä teemoja.
ElegantTips - Tämä kirjasto sisältää muutamia valmiiksi rakennetut teemat joka voidaan muuttaa annettujen luokan nimien kanssa. Toisin kuin muut kirjastot, jotka tukevat HTML5: ää data- tai Aria-label attribuutti, ElegantTips vaatii ylimääräisen elementin, joka lisätään työkaluvihkon muodostamiseksi. Näin voit lisätä kirjaimellisesti minkä tahansa sisällön työkalutyyppiin kuin yksinkertainen teksti.
Tootik - Ei vain, että tämä CSS-kirjasto tarjoaa tyylitaulukon CSS-, LESS- ja SasS-muodossa, se tarjoaa myös helppokäyttöinen käyttöliittymä, jonka avulla voit muokata työkaluvihjeitä. Voit yksinkertaisesti kopioida ja liittää tämän työkalun tuottaman HTML-koodin. Se on niin yksinkertaista.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS tulee mukana runsaasti vaihtoehtoja työkalutyypin määrittämiseksi. Voimme muokata animaatioita, työkaluvihjeitä, leveyttä, kokoa, teemaa ja paljon muuta. Se tarjoaa myös soittopyyntötoiminnot, joiden avulla voit suorita toiminto, kun työkaluvihje näkyy ja piilotetaan. Nämä ominaisuudet tekevät TippyJS: stä yhden tehokkaista JavaScript-kirjastostamme luettelossamme luoda työkaluvihjeitä.
Darsain Tooltip - Tämä kirjasto tarjoaa työkalutyypin perustason toteutuksen. Siitä huolimatta se tarjoaa laajan vaihtoehdon valmistajan käyttäytymiseen ja a joukko nimimerkkejä työkaluvihjeiden ulkoasun muuttamiseksi. Tooltip toimii hyvin vanhemmissa selaimissa, kuten IE9: ssä ja tarvittaessa IE8: ssa, jossa on muutamia säätöjä.
Bubb - Bubb sopii hyvin kehittyneille JavaScript-käyttäjille. Käyttämällä sen laajoja sovellusliittymiä, lukuun ottamatta yksinkertaisen tekstin näyttämistä, voit ohjelmallisesti lisätä monimutkaisemman HTML-sisällön työkaluvihkoon. Se on aika siistiä; Voit viitata asiakirjoihin esimerkkeihin.
neppari - Sisältää teknisen otteen, jolla luodaan jotain “ponnahtaa”, kuten työkaluvihje, popover ja pudotusvalinnat. TippyJS käyttää sitä kirjastopohjaisena ja sitä käyttävät suuret nimet verkossa, kuten Bootstrap, Microsoft ja Atlassian.
YY Tooltip - Toisin kuin muut kirjastot, YY Tooltip ei edellytä HTML-elementin tai attribuuttien lisäämistä. Se toimii täysin JavaScriptin avulla, sisältö, sijainti ja värit määritellään objektissa HTML-elementin sijasta. Se on täydellinen käytettäväksi yhdessä JavaScript-sovelluksen kanssa.
Position.js - Toinen erinomainen kotoisin oleva JavaScript-kirjasto, joka luo työkaluvihjeitä, Position.js tarjoaa graafisen käyttöliittymän toiminnon määrittämiseksi ja yksinkertaisesti kopioimaan ja liittämään siellä luodun koodin. Position.js: ää voidaan käyttää yhdessä React.js: n tai Vue.js: n kanssa.
Bezet Tooltip - Tämä kirjasto tarjoaa 14 vaihtoehtoa työkaluvihjeiden näyttämiseksi; kuten oikea, vasen, pohja, vasen-keskus, oikea-end, pohja-keskus, jne. Sen lisäksi se on myös tarpeeksi fiksu, että se voisi säädä työkalupisteen sijainti käytettävissä olevan tilan perusteella ympärillä työkaluvihje. Tutustu demoon.
MouseTip - Tämä JavaScrtipt-kirjasto luo a työkaluvihje, joka siirtyy kohdistimen sijaintiin. Tooltip on määritetty ei-standardilla mousetip- määritteen sijasta HTML5: n sijaan data- ominaisuus. Mousetip on saatavana NPM-moduulina.
Internetips - Aivan samanlainen kuin MousetTip, tämän kirjaston tuottama työkaluvihje seuraa kohdistimen sijaintia. Kaikki on määritetty JavaScript-objektin sijaan HTML: n ja ominaisuuksia rakennetaan myös nykyaikaisille selaimille. Se on kevyt ja nopea.
MTip - JavaScript-kirjasto Tooltipille hyvä selaimen yhteensopivuus. Se on yhteensopiva IE8: n kanssa, joka on täysin muokattavissa asetusten avulla, ja voit lisätä Tooltipin mihin tahansa elementtiin jopa img (kuvaelementti).
Bubblesee - kevyt JavaScript-kirjasto, joka tarjoaa yksinkertaisen toiminnallisuuden a “tooltip”. JavaScript-kirjastoa on helppo käyttää ilman monimutkaisia vaihtoehtoja tulostuksen muokkaamiseen. Sass-tiedosto toimitetaan, jos haluat muuttaa työkaluvihjeiden ulkoasua. Tutustu demoon.
Tipfy - Rakennettu moderni JavaScript-syntaksi, ES6, Tipfy on vain 2 kB: n kokoinen. Kirjasto tarjoaa kaksi versiota tiedostoista: tipfy.min.js scriptin tarjoaminen modernin ES6-syntaksin, ja tipfy.es5.min.js jos tarvitset yhteensopivuutta vanhempien selaimien kanssa. Se käyttää data- määrite, jonka avulla voit mukauttaa työkaluvihjettä; data-tipfy-puolella, esimerkiksi asetetaan työkaluvihjeiden suunta ja käyttö data-tipfy-text määrite lisätä työkalutyypin sisältöä.
jQuery
Tooltipster - Tämä kirjasto tarjoaa laajan vaihtoehdon, jolla voit muokata lähes mitä tahansa teema, animaatio, kosketustuki, sisältö, avoin ja lähellä oleva liipaisin, jne. Se tarjoaa myös mukautetun tapahtuman kuuntelijan ja takaisinsoiton, jonka avulla kehittäjät voivat laajentaa työkalupiiriä mukautettujen toimintojen avulla. Myös jQuery-laajennus on tooltip toimisi vanhemmassa selaimessa kuten IE6 riippuen jQuery-versiosta käytetään.
Protip - Toinen laaja jQuery-laajennus, Protip tukee 49 paikkaa, HTML-työkalutyökalun sisällön, kuvakkeen tuen, mukautettujen soittopyyntöjen, ja paljon muuta. Protip tarjoaa graafisen käyttöliittymän, jonka avulla voit muokata työkaluvihjeitä helposti.
POWERTIP - Tämä jQuery-laajennus tuo myös asetukset ja sovellusliittymät, jotka tarjoavat kehittäjille useita erilaisia tapoja toteuttaa työkaluvihjeitä. Se tukee näppäimistön navigointi; näkyviin tulee ponnahdusikkuna, kun navigoidaan elementteihin kieleke näppäimistö. PowereTip on saatavilla NPM-moduulina. Sitä voidaan käyttää RequireJS: n ja Browserify-toiminnon kanssa.
Esteetön Aria Tooltip - Sisäänrakennettu jQuery-laajennus, jossa on Accessibility -toiminto, työkaluvihje on Suunniteltu näyttämään valintaikkunan, jossa on otsikko, tekstirivi ja sulkupainike. Se on yksi omasta listastamme.
TipsJS - Yksinkertainen jQuery-laajennus, mutta se tuo mukanaan melko ominaisia piirteitä. tooltip-sisältö asetetaan a: lla data-vihjeteksti ominaisuus. Lisäksi on mahdollista, että voimme myös pakata sisällön erikoismerkkeillä, jotta muotoiltaisimme sisällön, joka on samanlainen kuin Markdown-muotoilu. Voimme käyttää * tehdä sisältöä rohkeasti, ~ kursiivilla ja ^ otsikkoon.
Dark Tooltip - Tämä kirjasto tarjoaa joitakin todella hyödyllisiä ominaisuuksia työkaluvihkon käynnistämiseksi. Voimme esimerkiksi lisätä a Vahvista-painike - Kyllä ja Ei, himmentäkää tausta, kun työkaluvihje näkyy, ja lisää HTML-elementtejä sisältöön. Luulen, että sinun pitäisi todellakin tarkistaa demo-sivu.
Aria Tooltip - Toinen työkalu, jossa on sisäänrakennettu esteettömyysominaisuus, tämä jQuery-laajennus on WAI-ARIA 1.1 -yhteensopiva. Se on herkkä tavallaan tarjoavat erilaisia kokoonpanoja eri näkymän kokoille. Aria Tooltip on saatavana nimeltään NPM-moduuli t-aaria-vihjeteksti.
Toolbar.js - Vaikka toinen jQuery-laajennus voi näyttää vain yksinkertaisen tekstin tai HTML-sisällön työkaluvihjeessä, tämä jQuery-laajennus luo työkalurivin. Työkalupiirissä olisi kaksi tai useampia linkkejä kuvakkeeseen, joka yleensä suorittaa toiminnon klikkaus, kuten mikä tahansa työkalurivi. Tarkista asiakirjat ja esimerkit.
VueJS
V-Työkaluvinkki - V-Tooltip on Vue.js -komponentti, jota powered by Popper.js hupun alla. Se tarjoaa a nimetty uusi direktiivi v-vihjeteksti joka voidaan lisätä mihin tahansa elementtiin työkalutyypin luomiseksi. v-vihjeteksti voi sisältää työkalutyypin sisällön tai Asetukset. Mukana tavanomaista v-vihjeteksti voit myös lisätä työkalupiirin v-popover komponentti. Tällä komponentilla voit lisää monimutkaisempi sisältö työkalutyyppiin Vue.js-komponentin tai HTML: n avulla.
Vue-Bulma Tooltip - Vue.js-komponentti, jolla luodaan työkaluvihje Bulma UI Frameworkin perusteella. Tämä kirjasto on osa Vue Bulman osaa. Mutta tooltip-komponentti on nimeltään NPM-moduuli Vue-Bulma-työkaluvinkki että voit käyttää tätä itsenäisenä komponenttina.
Vue-direktiivi-Tooltip - Kaiken kaikkiaan se on samanlainen kuin V-Tooltip -komponentti, joka perustuu Popper.js-ohjelmaan, ja siinä on sama direktiivi v-vihjeteksti. Se ei kuitenkaan näytä tarjoavan v-popover komponentti.
Vue-Tippy - Tämä kirjasto käärii Tippy.js: n Vue.js-komponentiksi. Siinä on mukautettu Vue.js-direktiivi, jota kutsutaan v-tippy joka toimii kuin HTML-attribuutti; voimme lisätä sisältöä työkaluvihjeeseen tai sen mukauttamiseen. Se myös tekee a mukautettu Vue.js-komponentti työkaluvihjeiden sisällössä html vaihtoehto.
VueJS-popover - Mukautettu Vue.js, jossa on mukautettu direktiivi v-popover ja kaksi mukautettua komponenttia
Vue-Vihje - Vue.js-laajennus, joka käärii Hint.css: n. Lisäominaisuudet v-vihje-CSS direktiiviin lisätä työkaluvihje. Se tuo samoja vaihtoehtoja kuin Hint.css, voit lisätä ne JavaScript-objektiksi tai Vue.js-muokkaajaksi.
ReactJS
Reagoi Joyride - React-komponentti näyttää joukon työkaluvihjeitä ohjaa uusia käyttäjiä tutustumaan uuteen sovellukseen.
Reagoi Floater - Tämä kirjasto pakkaa Popper.js: n React-komponentiksi nimeltä Floater, joten sillä on samat upeat ominaisuudet kuin Floaterilla. Voit lisätä työkaluvihjeitä ja ponnahdusikkunoita, ja voit myös leikkiä tämän komponentin kanssa läpi tämän hiekkalaatikon.
React Autotip - Yksinkertainen React-komponentti, jossa on automaattinen paikannusominaisuus säätää automaattisesti työkalutyypin sijainnin kun sen ympärillä oleva tila muuttuu.
Reagoi Tippy - Rakennettu Tippy.js: n ja Popover.js: n päälle. Tämä kirjasto esittelee a tooltip komponentti voit lisätä React-sovellukseen.
Reagoi Vihje - Reaktiokomponentti, joka ulottuu Hint.css: iin. Komponentit lisäävät muutamia ominaisuuksia, joita ei ole saatavilla Hint.css: ssä, kuten automaattinen sijainti, viive ja takaisinkytkentä.
Lisää
Ember-työkalut - Ember.js-komponentti työkaluvihjeiden luomiseksi on rakennettu Popper.js: n päälle. Komponentti on myös suunniteltu esteettömyydestä ja paranee, jotta se täyttäisi noin 508 sitoumusta tässä asiassa.
D3 Vihje - D3.js-laajennus. D3.js on JavaScript-kirjasto tietojen visualisointiin, kuten kaavioihin, karttoihin, kaavioihin jne. Tämä plugin voit näyttää työkalutyypin näiden tietojen päälle.
