Tippy.js - Lättvikt Vanilla Javascript Tooltip Library

Verktygstips är användbara för att visa lite bitar av extra innehåll. De sparar utrymme på sidan och ger dig ett rum för att animera någonting som griper folkens uppmärksamhet.

Tidigare har vi täckt verktygstipsskript, men många utvecklare vill ha anpassade bibliotek. Vissa föredrar jQuery, andra vill ha enkel vanilj JS.

Tippy-plugin fungerar bäst för den senare gruppen som vill arbeta med vanilj JS-kod.

Med Tippy.js får du en fullt fungerande verktygstips bibliotek körs på toppen av Popper.js. Det betyder att plugin-programmet kommer med ett litet beroende, men det är mycket lättare att hantera än jQuery-biblioteket.

Så vad är Tippys skönhet? Den lägger till på standard Popper-stilar för att skapa mer dynamiska verktygstips med otroliga effekter.

Du kan lägga till blekningar, diabilder, wiggles, anpassade varaktigheter, återuppringningsmetoder och till och med dynamiska effekter som automatisk roterande verktygstips.

Verkligen kommer det här pluginet att ta dina verktygstips upp till en helt ny nivå med väldefinierade användbarhetsfunktioner. Du kan behålla verktygstips som är fasta på skärmen med vissa sidelement, eller få dem att ändra orientering om skärmen blir för liten.

Den stöder också pekdon som gör den perfekt för lyhörda layouter. HTML-verktyget är märkt med ARIA-standarder för maximal tillgänglighet. Jag kan inte tänka mig något dåligt att säga om det här plugin!

Om du vill prova detta på din egen webbplats, ladda bara en kopia av källkoden från GitHub. Detta inkluderar de viktigaste pluginfilerna tillsammans med detaljer om hur man installerar det med npm.

Standardfilen Tippy.js kommer med Popper.js inkluderad så att du inte ens behöver ladda ner det extra biblioteket. Allt du behöver är standard JS / CSS-fil och en webbsida för att köra verktygstips.

Om du vill gräva längre in i några exempel, ta en titt på Tippy.js hemsida som innehåller levande prover + kodavsnitt som du kan kopiera och återanvända.