Maak Speech Bubbles op pagina met Popper.js
Iedereen weet het tooltips en er zijn tientallen gratis bronnen om je te helpen ze te maken. Echter, aangepaste bericht bubbels of “poppers” zijn ook erg handig.
Ze zijn niet beperkt tot hover-evenementen, zodat ze consistent op de pagina kunnen verschijnen en andere gebruikersgedragingen kunnen omzeilen.
Als u deze wilt maken poppers met tekstballonnen op jouw site dan Popper.js is de beste keuze. Het is een gratis opensource-plugin, gehost op de officiële js.org-website.
Je vindt deze bubbeltips op veel websites met complexe interfaces. Soms bieden ze snelle tips, walkthroughs, en onboarding-advies voor mensen die nieuw zijn in de interface.
Met Popper.js hoeft u niet te wachten totdat de gebruiker zweeft om een tooltip te maken. In plaats daarvan kun je een popper forceren verschijnen overal, elke grootte, elke kleur, met dynamische positionering.
Bekijk de demo-pagina van Popper.js om te zien wat ik bedoel. Het komt met een breed scala aan positioneringsfuncties waarmee u de popperpositie automatisch kunt omdraaien op basis van de locatie op het scherm.
Naarmate de gebruiker de pagina naar beneden scrolt, kan de popperballon verloren gaan. Met deze plug-in, kunt u dwing het terug in beeld door deze op of neer te klappen, afhankelijk van de schuifrichting van de gebruiker.
Je hebt volledige controle over de grenzen, de pijlposities, de kleuren van de tooltip en nog veel meer. Om nog te zwijgen van deze plugin is prachtig en volledig uitbreidbaar als je je eigen functies aan de mix wilt toevoegen.
Alle broncode is gratis beschikbaar op GitHub als je het wilt bekijken.
Bekijk om te beginnen de documentatiepagina voor een volledige gids. Dit vertelt u welke scripts u nodig heeft, hoe u een eigen popper instelt en hoe u de verschillende viewport-opties configureert. Hoewel, de beste bron is de hoofdpagina Popper.js, met demo's in overvloed en veel codevoorbeelden.
Als je meer wilt lezen over ontwikkeling, lees dan dit blogbericht geschreven door de maker Federico Zivolo.
