Opprett on-side talebobler med Popper.js

Alle vet om verktøytips, og det finnes dusinvis av ledige ressurser for å hjelpe deg med å gjøre dem. Imidlertid er egendefinerte meldingbobler eller "poppers" også svært nyttige.

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

Hvis du ønsker å lage disse taleboblepoppene på nettstedet ditt, er Popper.js 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 tilbyr de raske tips, gjennomganger og råd om råd for folk som er nye i 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 å dukke opp hvor som helst, hvilken som helst størrelse, hvilken som helst farge, med dynamisk posisjonering .

Sjekk ut Popper.js demosiden for å se hva jeg mener. Den leveres med et bredt spekter av posisjonsfunksjoner 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 det tilbake til visning ved å bla det opp (eller ned), avhengig av brukerens rulleretning.

Du har full kontroll over grensene, pilposisjonene, 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å dokumentasjonssiden 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 den viktigste 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.