Δημιουργία φυσαλίδων ομιλίας επί της σελίδας με το Popper.js

Ο καθένας ξέρει εργαλεία και υπάρχουν δεκάδες ελεύθεροι πόροι για να σας βοηθήσουν να τις κάνετε. Ωστόσο, προσαρμοσμένες φυσαλίδες μηνυμάτων ή “poppers” είναι επίσης πολύ χρήσιμα.

Αυτοί δεν περιορίζονται σε γεγονότα που αιωρούνται, ώστε να μπορούν να εμφανίζονται στη σελίδα με συνέπεια και να εργάζονται γύρω από άλλες συμπεριφορές χρηστών.

Αν θέλετε να δημιουργήσετε αυτά φούσκα λόγου poppers στον ιστότοπό σας Popper.js είναι η καλύτερη επιλογή. Είναι ένα δωρεάν πρόσθετο ανοιχτού κώδικα, το οποίο φιλοξενείται στην επίσημη ιστοσελίδα του js.org.

Θα βρείτε αυτές τις συμβουλές φυσαλίδων σε πολλές ιστοσελίδες που έχουν σύνθετες διεπαφές. Μερικές φορές θα προσφέρουν γρήγορες συμβουλές, walkthroughs, και συμβουλές κατά την επιβίβαση για ανθρώπους νέους στο περιβάλλον εργασίας.

Με το Popper.js, δεν χρειάζεται να περιμένετε να οπισθοχωρήσει ο χρήστης για να δημιουργήσει μια επεξήγηση εργαλείου. Αντ 'αυτού, μπορείτε να αναγκάσετε ένα popper να εμφανίζονται οπουδήποτε, οποιοδήποτε μέγεθος, οποιοδήποτε χρώμα, με δυναμική τοποθέτηση.

Ελέγξτε τη σελίδα επίδειξης Popper.js για να δείτε τι εννοώ. Έρχεται με ένα ευρεία σειρά χαρακτηριστικών εντοπισμού θέσης που σας επιτρέπουν να αναστρέψετε αυτόματα τη θέση του popper με βάση την θέση της οθόνης.

Καθώς ο χρήστης μετατοπίζει τη σελίδα, μπορεί να χάσει τη φούσκα popper. Με αυτό το plugin, μπορείτε να το επαναφέρετε στην οπτική γωνία ανατρέποντας (προς τα κάτω), ανάλογα με την κατεύθυνση κύλισης του χρήστη.

Έχετε πλήρη έλεγχο των ορίων, των θέσεων βέλους, των χρωμάτων εργαλείων και πολλά άλλα. Για να μην αναφέρουμε αυτό το plugin είναι πανέμορφο και πλήρως επεκτάσιμη αν θέλετε να προσθέσετε τα δικά σας χαρακτηριστικά στο μίγμα.

Όλος ο πηγαίος κώδικας είναι διαθέσιμος δωρεάν στο GitHub αν θέλετε να το ελέγξετε.

Για να ξεκινήσετε, ρίξτε μια ματιά στο σελίδα τεκμηρίωσης για έναν πλήρη οδηγό. Αυτό σας λέει ποια σενάρια θα χρειαστείτε, πώς να ρυθμίσετε μια προσαρμοσμένη popper και πώς να διαμορφώσετε τις διαφορετικές επιλογές προβολής. Αν και, ο καλύτερος πόρος είναι ο κύρια σελίδα Popper.js, με τα demos εν αφθονία και πολλά δείγματα κώδικα.

Αν θέλετε να διαβάσετε περισσότερα για την εξέλιξη, ανατρέξτε σε αυτήν την ανάρτηση ιστολογίου που γράφτηκε από τον δημιουργό Federico Zivolo.