Tippy.js - Ελαφριά Βιβλιοθήκη Javascript Tooltip της Βανίλιας

Τα εργαλεία είναι χρήσιμα για την εμφάνιση μικρών κομματιών επιπλέον περιεχομένου. Εξοικονομούν χώρο στη σελίδα και σας δίνουν ένα δωμάτιο για να ζωντανέψετε κάτι που τραβάει την προσοχή των ανθρώπων.

Στο παρελθόν, έχουμε καλύψει τα σενάρια εργαλειοθηκών, αλλά πολλοί προγραμματιστές θέλουν προσαρμοσμένες βιβλιοθήκες. Μερικοί προτιμούν το jQuery, άλλοι θέλουν απλή βανίλια JS.

Το plugin Tippy λειτουργεί καλύτερα για την τελευταία ομάδα που θέλουν να εργαστούν με τον κώδικα βανίλιας JS.

Με το Tippy.js λαμβάνετε ένα πλήρως λειτουργική βιβλιοθήκη εργαλείων που τρέχει πάνω από το Popper.js. Αυτό σημαίνει ότι το plugin έρχεται με μια μικρή εξάρτηση, αλλά είναι πολύ πιο εύκολο να το διαχειριστεί από τη βιβλιοθήκη jQuery.

Ποια είναι λοιπόν η ομορφιά του Tippy; Προσθέτει τα προεπιλεγμένα στυλ Popper για δημιουργία πιο δυναμικά εργαλεία με απίστευτα αποτελέσματα.

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

Πραγματικά αυτό το plugin θα πάρει τα εργαλεία σας μέχρι ένα εντελώς νέο επίπεδο με καλά καθορισμένα χαρακτηριστικά ευχρηστίας. Μπορείτε να κρατήσετε διορθώσεις εργαλείων που έχουν οριστεί στην οθόνη με ορισμένα στοιχεία σελίδας, ή να τους αλλάξετε τον προσανατολισμό αν η οθόνη γίνει πολύ μικρή.

Υποστηρίζει επίσης συσκευές αφής που το καθιστούν ιδανικό για ευαίσθητες διατάξεις. Το HTML του tooltip φέρει ετικέτα χρησιμοποιώντας τα πρότυπα ARIA για μέγιστη προσβασιμότητα. Δεν μπορώ να σκεφτώ κάτι κακό να πω για αυτό το plugin!

Εάν θέλετε να δοκιμάσετε αυτό στο δικό σας site, απλώς κατεβάστε ένα αντίγραφο του πηγαίου κώδικα από το GitHub. Αυτό περιλαμβάνει τα κύρια αρχεία προσθήκης μαζί με λεπτομέρειες για το πώς να το εγκαταστήσετε χρησιμοποιώντας npm.

Το προεπιλεγμένο αρχείο δέσμης εντολών Tippy.js συνοδεύεται από το Popper.js, ώστε να μην χρειάζεται καν να κατεβάσετε αυτή την επιπλέον βιβλιοθήκη. Το μόνο που χρειάζεστε είναι το προεπιλεγμένο αρχείο JS / CSS και μια ιστοσελίδα για την εκτέλεση εργαλείων.

Αν θέλετε να βάλετε περισσότερα σε μερικά παραδείγματα, ρίξτε μια ματιά στην αρχική σελίδα του Tippy.js που περιλαμβάνει ζωντανά δείγματα + αποσπάσματα κώδικα που μπορείτε να αντιγράψετε και να επαναχρησιμοποιήσετε.