Opprett on-side talebobler med Popper.js

Alle vet om verktøytips og det finnes dusinvis av gratis ressurser for å hjelpe deg med å gjøre dem. derimot, egendefinerte meldingsbobler eller “poppers” er også veldig nyttige.

De er ikke begrenset til sving hendelser, slik at de kan vises på siden konsekvent og arbeide rundt andre brukeregner.

Hvis du ønsker å lage disse tale boble poppers på nettstedet ditt da Popper.js er det beste valget. Det er en gratis åpen kildekode plugin, hosted på den offisielle js.org nettsiden.

Du finner disse bobletipsene på mange nettsteder som har komplekse grensesnitt. Noen ganger vil de tilby raske tips, walkthroughs, og onboarding råd for folk som er nye til grensesnittet.

Med Popper.js trenger du ikke vente på at brukeren skal sveve bare for å lage et verktøytips. I stedet kan du tvinge en popper til vises hvor som helst, enhver størrelse, hvilken som helst farge, med dynamisk posisjonering.

Sjekk ut Popper.js demosiden for å se hva jeg mener. Den leveres med a bredt utvalg av posisjoneringsfunksjoner som lar deg automatisk vende popperposisjonen basert på skjermstedet.

Når brukeren ruller nedover siden, kan de miste popperboblen. Med dette pluginet kan du tvinge den tilbake til visning ved å bla den opp (eller ned), avhengig av brukerens rulleretning.

Du har full kontroll over grensene, pileposisjonene, verktøylippefargene og så mye mer. For ikke å nevne dette pluginet er nydelig og fullt uttrekkbar hvis du vil legge til dine egne funksjoner i blandingen.

Alt kildekoden er tilgjengelig gratis på GitHub hvis du vil sjekke det ut.

For å komme i gang, ta en titt på dokumentasjonsside for en full guide. Dette forteller deg hvilke skript du trenger, hvordan du konfigurerer en egendefinert popper, og hvordan du konfigurerer de forskjellige visningsalternativene. Selv om den beste ressursen er hoved Popper.js-siden, med demoer i massevis og masse kodeprøver.

Hvis du vil lese mer om utvikling, sjekk ut dette blogginnlegget skrevet av skaperen Federico Zivolo.