Tippy.js - Lett Vanilla Javascript Tooltip Library

Verktøytips er nyttige for å vise små biter av ekstra innhold. De sparer plass på siden og gir deg et rom for å animere noe som griper folkets oppmerksomhet.

Tidligere har vi dekket verktøytipsskript, men mange utviklere vil ha tilpassede biblioteker. Noen foretrekker jQuery, andre vil ha enkel vanilje JS.

Tippy-plugin fungerer best for sistnevnte gruppe som vil jobbe med vanilje JS kode.

Med Tippy.js får du en fullt fungerende verktøytipsbibliotek kjører på toppen av Popper.js. Dette betyr at pluginet kommer med en liten avhengighet, men det er mye enklere å administrere enn jQuery-biblioteket.

Så hva er Tippys skjønnhet? Den legger til standard Popper-stiler for å lage mer dynamiske verktøytips med utrolige effekter.

Du kan legge til fades, lysbilder, wiggles, egendefinerte varigheter, tilbakeringingsmetoder og til og med dynamiske effekter som automatisk roterende verktøytips.

Virkelig dette pluginet vil ta verktøytipsene dine opp til et helt nytt nivå med veldefinerte bruksegenskaper. Du kan beholde verktøytips som er festet til skjermen med visse sideelementer, eller få dem til å endre retning hvis skjermen blir for liten.

Den støtter også berøringsenheter som gjør dette perfekt for responsive layouter. HTML-verktøyet er merket med ARIA-standarder for maksimal tilgjengelighet. Jeg kan ikke tenke på noe dårlig å si om dette pluginet!

Hvis du vil prøve dette på ditt eget nettsted, bare last ned en kopi av kildekoden fra GitHub. Dette inkluderer de viktigste pluginfilene sammen med detaljer om hvordan du installerer den ved hjelp av npm.

Standard Tippy.js skriptfil leveres med Popper.js inkludert, slik at du ikke engang trenger å laste ned det ekstra biblioteket. Alt du trenger er standard JS / CSS-fil og en nettside for å kjøre verktøytips.

Hvis du vil grave lengre inn i noen eksempler, ta en titt på Tippy.js hjemmeside som inneholder liveprøver + kodestykker du kan kopiere og gjenbruke..