Tippy.js - Kevyt Vanilla Javascript Tooltip -kirjasto

Työkalut ovat hyödyllisiä, kun näytetään vähän ylimääräistä sisältöä. Ne säästävät tilaa sivulla ja antavat sinulle tilaa animoida jotain, joka tarttuu ihmisten huomion.

Aiemmin olemme käsitelleet työkaluvihjeitä, mutta monet kehittäjät haluavat mukautettuja kirjastoja. Jotkut haluavat jQueryä, toiset haluavat yksinkertaista vanilja JS: ää.

Tippy-plugin toimii parhaiten viimeksi mainittuun ryhmään jotka haluavat työskennellä vanilja JS-koodilla.

Tippy.js: n avulla saat täysin toimiva työkalupiirikirjasto käynnissä Popper.js: n päällä. Tämä tarkoittaa sitä, että pluginilla on pieni riippuvuus, mutta se on paljon helpompi hallita kuin jQuery-kirjasto.

Joten mikä on Tippyn kauneus? Se lisää oletettavien Popper-tyylien luomiseksi dynaamisempia työkaluvihjeitä uskomattomia vaikutuksia.

Voit lisätä häipymiä, dioja, wigglejä, mukautettuja kestoja, soittopyyntömenetelmiä ja jopa dynaamisia tehosteita, kuten automaattisia pyöriviä työkaluvihjeitä.

Todella tämä plugin vie työkalutyyppisi kokonaan uudelle tasolle, jossa on hyvin määritelty käytettävyysominaisuudet. Voit pitää tiettyihin sivuelementteihin kiinnitetyt työkaluvihkot, tai muuta ne suuntautumiseen, jos näyttö muuttuu liian pieneksi.

Se tukee myös kosketuslaitteita, jotka tekevät tästä täydellisen ratkaisun joustaviin asetteluihin. Tooltip-HTML-koodi on merkitty ARIA-standardien avulla, jotta saavutetaan suurin mahdollinen saatavuus. En voi ajatella mitään pahaa sanoa tästä pluginista!

Jos haluat kokeilla tätä omassa sivustossasi, lataa vain lähdekoodin kopio GitHubilta. Tämä sisältää tärkeimmät plugin-tiedostot sekä yksityiskohtaiset tiedot siitä, miten se asennetaan npm: llä.

Oletus Tippy.js-skriptitiedosto on mukana Popper.js: n mukana, joten sinun ei tarvitse ladata tätä ylimääräistä kirjastoa. Tarvitset vain JS / CSS-oletusarvoisen tiedoston ja verkkosivun, jolla suoritetaan työkaluvihjeitä.

Jos haluat kaivaa lisää esimerkkeihin, tutustu Tippy.js-kotisivulle, joka sisältää live-näytteitä + koodinpätkät, joita voit kopioida ja käyttää uudelleen.