Tippy.js - Lichtgewicht JavaScript-tooltipbibliotheek van vanille

Tooltips zijn handig voor het tonen van kleine stukjes extra inhoud. Ze besparen ruimte op de pagina en geven je een kamer om iets te animeren dat de aandacht van mensen trekt.

In het verleden hebben we tooltip-scripts behandeld, maar veel ontwikkelaars willen aangepaste bibliotheken. Sommigen geven de voorkeur aan jQuery, anderen willen eenvoudige vanilla JS.

De Tippy-plug-in werkt het beste voor de laatste groep die willen werken met vanille JS-code.

Met Tippy.js krijg je een volledig functionerende tooltip-bibliotheek draait bovenop Popper.js. Dit betekent dat de plug-in gepaard gaat met een kleine afhankelijkheid, maar het is een stuk eenvoudiger te beheren dan de jQuery-bibliotheek.

Dus wat is het mooie van Tippy? Het voegt toe aan de standaard Popper-stijlen om te creëren meer dynamische tooltips met ongelooflijke effecten.

U kunt fades, dia's, wiggles, aangepaste tijdsduren, callback-methoden en zelfs dynamische effecten toevoegen, zoals automatisch roterende tooltips.

Deze plug-in neemt uw tooltips echt naar een geheel nieuw niveau met goed gedefinieerde gebruiksvriendelijkheid. Je kan houden tooltips bevestigd op het scherm met bepaalde pagina-elementen, of laat ze van richting veranderen als het scherm te klein wordt.

Het ondersteunt ook aanraakapparaten, wat dit perfect maakt voor responsieve lay-outs. De HTML-tooltip is gelabeld met ARIA-standaarden voor maximale toegankelijkheid. Ik kan niets slechts zeggen over deze plug-in!

Als je dit op je eigen site wilt proberen, download dan gewoon een kopie van de broncode van GitHub. Dit omvat de belangrijkste plugin-bestanden, samen met details over hoe het te installeren met behulp van npm.

Het standaard Tippy.js-scriptbestand wordt geleverd met Popper.js, zodat u die extra bibliotheek niet eens hoeft te downloaden. Het enige dat u nodig hebt, is het standaard JS / CSS-bestand en een webpagina om tooltips uit te voeren.

Als je verder in enkele voorbeelden wilt graven, kijk dan eens naar de Tippy.js-startpagina met live voorbeelden + codefragmenten die je kunt kopiëren en opnieuw kunt gebruiken.