Skapa bubblar på sidan med Popper.js

Alla vet om verktygstips och det finns dussintals lediga resurser som hjälper dig att göra dem. dock, anpassade meddelandebubblor eller “poppers” är också mycket användbara.

De är inte begränsade till svänghändelser, så att de kan visas på sidan konsekvent och arbeta kring andra användarbeteenden.

Om du vill skapa dessa talbubbelpoppers på din sida då Popper.js är det bästa valet. Det är ett gratis plugin för öppen källkod, värd på den officiella webbplatsen js.org.

Du hittar dessa bubbelpunkter på många webbplatser som har komplexa gränssnitt. Ibland erbjuder de snabba tips, genomgångar, och ombordgivning råd för nybörjare till gränssnittet.

Med Popper.js behöver du inte vänta på att användaren ska sväva bara för att skapa ett verktygstips. Istället kan du tvinga en popper till visas var som helst, vilken storlek som helst, vilken färg som helst, med dynamisk positionering.

Kolla in dem på Popper.js för att se vad jag menar. Den levereras med a brett utbud av positioneringsfunktioner som låter dig automatiskt vända popperpositionen baserat på skärmplatsen.

När användaren rullar ner på sidan kan de förlora poppbubblan. Med det här pluginet kan du tvinga den tillbaka till sikte genom att bläddra uppåt (eller nedåt), beroende på användarens rullningsriktning.

Du har full kontroll över gränserna, pilpositionerna, verktygsfärgerna och så mycket mer. För att inte tala om det här pluginet är underbart och helt utdragbar om du vill lägga till dina egna funktioner i mixen.

All källkod finns gratis på GitHub om du vill kolla in det.

För att komma igång, ta en titt på dokumentationssida för en fullständig guide. Detta berättar vilka skript du behöver, hur du konfigurerar en anpassad popper och hur du konfigurerar de olika visningsalternativen. Även om den bästa resursen är Huvud Popper.js sida, med demos i stort och gott om kodprover.

Om du vill läsa mer om utveckling kolla in det här blogginlägget, skrivet av skaparen Federico Zivolo.