Crea bolle di discorso in-page con Popper.js

Tutti lo sanno tooltip e ci sono dozzine di risorse gratuite per aiutarti a realizzarle. però, bolle di messaggi personalizzati o “poppers” sono anche molto utili.

Essi non sono limitati a eventi al passaggio del mouse, in modo che possano apparire coerentemente sulla pagina e aggirare altri comportamenti dell'utente.

Se stai cercando di creare questi poppers del fumetto sul tuo sito allora Popper.js è la scelta migliore. È un plugin open source gratuito, ospitato sul sito web ufficiale di js.org.

Troverai questi suggerimenti sulle bolle in molti siti web con interfacce complesse. A volte loro offriranno consigli veloci, procedure dettagliate, e consulenza di bordo per le persone nuove all'interfaccia.

Con Popper.js, non è necessario attendere che l'utente passi il mouse solo per creare un suggerimento. Invece, puoi forzare un popper a apparire ovunque, qualsiasi dimensione, qualsiasi colore, con posizionamento dinamico.

Controlla la pagina demo di Popper.js per vedere cosa intendo. Viene fornito con a vasta gamma di funzioni di posizionamento che ti consente di ribaltare automaticamente la posizione del popper in base alla posizione dello schermo.

Mentre l'utente scorre verso il basso della pagina, potrebbe perdere la bolla di pop-up. Con questo plugin, puoi forzarlo di nuovo in vista ruotandolo verso l'alto (o verso il basso), a seconda della direzione di scorrimento dell'utente.

Hai il pieno controllo sui confini, le posizioni delle frecce, i colori del tooltip e molto altro ancora. Per non parlare di questo plugin è stupendo e completamente estensibile se vuoi aggiungere le tue caratteristiche nel mix.

Tutto il codice sorgente è disponibile gratuitamente su GitHub se vuoi verificarlo.

Per iniziare, dai un'occhiata al pagina di documentazione per una guida completa. Questo ti dice quali script ti serviranno, come configurare un popper personalizzato e come configurare le diverse opzioni di visualizzazione. Anche se, la migliore risorsa è il pagina principale di Popper.js, con demo a bizzeffe e molti esempi di codice.

Se vuoi saperne di più sullo sviluppo consulta questo post sul blog scritto dal creatore Federico Zivolo.