Tippy.js - Letvægts Vanilla Javascript Tooltip Library

Værktøjstip er nyttige til at vise lidt bit ekstra indhold. De sparer plads på siden og giver dig et rum til at animere noget, der tager fat på folks opmærksomhed.

Tidligere har vi dækket værktøjstipskript, men mange udviklere vil have brugerdefinerede biblioteker. Nogle foretrækker jQuery, andre vil have simpel vanilla JS.

Tippy-plugin fungerer bedst for sidstnævnte gruppe der vil arbejde med vanille JS kode.

Med Tippy.js får du en fuldt fungerende værktøjstip bibliotek kører oven på Popper.js. Dette betyder, at plugin'et kommer med en lille afhængighed, men det er meget lettere at administrere end jQuery-biblioteket.

Så hvad er Tippys skønhed? Det tilføjer til standard Popper stilarter til at oprette mere dynamiske værktøjstips med utrolige effekter.

Du kan tilføje fades, dias, wiggles, brugerdefinerede varigheder, tilbagekaldelsesmetoder og endda dynamiske effekter som automatisk roterende værktøjstip.

Virkelig dette plugin vil tage dine værktøjstips op til et helt nyt niveau med veldefinerede anvendelsesmuligheder. Du kan beholde værktøjstips fastgjort til skærmen med visse sideelementer, eller få dem til at ændre orientering, hvis skærmen bliver for lille.

Det understøtter også touch-enheder, der gør dette perfekt til lydhørige layouter. HTML-værktøjstipen er mærket med ARIA-standarder for maksimal tilgængelighed. Jeg kan ikke tænke på noget dårligt at sige om dette plugin!

Hvis du vil prøve dette på dit eget websted, skal du bare downloade en kopi af kildekoden fra GitHub. Dette omfatter de vigtigste plugin-filer sammen med detaljer om, hvordan man installerer det ved hjælp af npm.

Standard script Tippy.js kommer med Popper.js inkluderet, så du behøver ikke engang at downloade det ekstra bibliotek. Alt du behøver er standard JS / CSS fil og en webside til at køre værktøjstips.

Hvis du vil grave længere ind i nogle eksempler, kan du kigge på Tippy.js hjemmeside, der indeholder liveprøver + kodestykker, du kan kopiere og genbruge..