40+ Χρήσιμα εργαλεία Scripts με CSS, JavaScript και jQuery
Ένα ενδιαφέρον στοιχείο UI, tooltips (που ονομάζονται επίσης infotips) κάνουν ένα μικρό κουτί να εμφανίζεται όταν το ο δρομέας του ποντικιού μετακινείται πάνω από ένα συγκεκριμένο κείμενο ή εικόνα με πληροφορίες όσον αφορά το στοιχείο που μετατοπίζεται. Από την άποψη της εμπειρίας των χρηστών, τα εργαλεία παρέχουν στους χρήστες την πιο γρήγορη και ευκολότερη πηγή πληροφοριών χωρίς να χρειάζεται να κάνετε κλικ σε τίποτα.
Παρόλο που ο απλούστερος τρόπος για να προσθέσετε συμβουλές στο κείμενο σας είναι να χρησιμοποιήσετε την ετικέτα HTML ή TITLE =””, ALT =””. Ωστόσο, υπάρχουν κάποια πραγματικά δροσερά τα σχέδια και τα στυλ σχεδίασης εργαλείων που μπορείτε να δημιουργήσετε με το JavaScript και το CSS χρησιμοποιώντας δέσμες ενεργειών. Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ.
CSS
Balloon.css - Το μπαλόνι είναι βιβλιοθήκη CSS που αποτελείται από SasS και λιγότερο για να εμφανιστεί μια διαδραστική επεξήγηση εργαλείου. Το περιεχόμενο και η θέση της επεξήγησης εργαλείων μπορούν να διαμορφωθούν μέσω του δεδομένα- Χαρακτηριστικό. Μπορείτε να εμφανίσετε την επεξήγηση εργαλείων αριστερά, δεξιά ή αριστερά-δεξιά. Μπορείτε ακόμη και προσθέστε το Emojis στο περιεχόμενο. Το Balloon.css μπορεί να εγκατασταθεί μέσω του NPM και να το φορτώσει από το CDNJS.
Simptip - Δημιουργήθηκε με δυνατότητα SasS να να αναδιαμορφώσετε και να ανασυγκροτήσετε τον κώδικα για να ικανοποιήσετε τις απαιτήσεις σας. Η θέση υποδείγματος και το περιεχόμενο μπορούν να διαμορφωθούν μέσω του ονόματος της κλάσης και του υποδείγματος εργαλείου δεδομένων Χαρακτηριστικό. Το Simptip είναι διαθέσιμο ως NPM, Νήματα και συσκευασία Bower.
Hint.css - Μια από τις δημοφιλείς βιβλιοθήκες CSS για εμφάνιση εργαλειοθήκης, το Hint.css χρησιμοποιείται από πολλές δημοφιλείς ιστοσελίδες όπως το Fiverr, το Webflow και το Tridiv. Σε αντίθεση με τις άλλες δύο βιβλιοθήκες του CSS, Hint.css χρησιμοποιεί Aria-label Μπορείτε να διαμορφώσετε το μέγεθος και το χρώμα μέσω των ονομάτων κλάσης χρησιμοποιώντας τη μεθοδολογία BEM. Το Hint.css είναι διαθέσιμο σε NPM, Bower και CDNJS.
Microtip - Μια άλλη awesome CSS βιβλιοθήκη για τη δημιουργία tooltip χτισμένο με “Προσιτότητα” κατά νου, Microtip χρήσεις Aria-label για να κρατήσετε το περιεχόμενο του εργαλείου και δεδομένα- για να διαμορφώσετε το μέγεθος και τη θέση του εργαλείου.
Χρησιμοποιεί τη μεταβλητή CSS, η οποία σας επιτρέπει να προσαρμόσετε την επεξήγηση εργαλείων με απλό αρχείο CSS. Οι μεταβλητές CSS υποστηρίζονται ήδη σε πολλά προγράμματα περιήγησης ιστού και κινητού. Το Microtip είναι διαθέσιμο ως πακέτο NPM, Νήματα και UNPkg CDN.
Wenk - Είναι μόλις 733 bytes. Μια εξαιρετικά ελαφριά βιβλιοθήκη γραμμένο σε ένα υπερσύγχρονο CSS χρησιμοποιώντας CSSNext, LESS και SCSS έτσι μπορείτε να προσαρμόσετε και να ανασυγκροτήσετε τα στυλ όπως σας αρέσει. Το Wenk μπορεί να μεταφορτωθεί από το NPM, το νήμα και τις ακόλουθες δωρεάν υπηρεσίες CDN: rawgit.com και unpkg.com.
Tooltippy - Αλλο ελαφριά βιβλιοθήκη CSS με μέγεθος περίπου 1 KB. Το Tooltippy περιλαμβάνει αρκετά προκαθορισμένα θέματα για το σχεδιασμό της επεξήγησης εργαλείων. Είναι γραμμένο με προ-επεξεργαστές CSS με όνομα Stylus. Δείτε τις οδηγίες για το πώς μπορείτε να επεκτείνετε ή να προσαρμόσετε αυτά τα θέματα.
ElegantTips - Αυτή η βιβλιοθήκη έρχεται με μερικές προεπιλεγμένα θέματα που μπορεί να αλλάξει με τα παρεχόμενα ονόματα κλάσεων. Σε αντίθεση με τις άλλες βιβλιοθήκες που βασίζονται σε HTML5 δεδομένα- ή το Aria-label χαρακτηριστικό, το ElegantTips απαιτεί ένα πρόσθετο στοιχείο που προστίθεται για να σχηματίσει την επεξήγηση εργαλείου. Αυτό σας επιτρέπει να προσθέστε κυριολεκτικά οποιοδήποτε περιεχόμενο στη συμβουλή εργαλείου πέρα από το απλό κείμενο.
Tootik - Όχι μόνο ότι αυτή η βιβλιοθήκη CSS παρέχει το φύλλο στυλ σε μορφή CSS, LESS και SasS, παρέχει επίσης ένα εύκολο στη χρήση GUI για να προσαρμόσετε την επεξήγηση εργαλείων. Μπορείτε απλά να αντιγράψετε και να επικολλήσετε το HTML που δημιουργείται από αυτό το εργαλείο. Είναι τόσο απλό.
VanillaJS
TippyJS - Powered by Popper.js, το TippyJS έρχεται με ένα πληθώρα επιλογών για τη διαμόρφωση της επεξήγησης εργαλείων. Μπορούμε να προσαρμόσουμε τα κινούμενα σχέδια, το βέλος εργαλείου, το πλάτος, το μέγεθος, το θέμα και πολλά άλλα. Παρέχει επίσης λειτουργίες επανάκλησης με τις οποίες μπορείτε εκτελέστε μια λειτουργία όταν εμφανίζεται και κρυμμένη η συμβουλή εργαλείου. Αυτά τα χαρακτηριστικά κάνουν την TippyJS μία από τις ισχυρές μας βιβλιοθήκες JavaScript στη λίστα μας για να δημιουργήσουμε μια επεξήγηση.
Darsain Tooltip - Αυτή η βιβλιοθήκη παρέχει τη βασική εφαρμογή μιας επεξηγηματικής σημείωσης. Παρ 'όλα αυτά, παρέχει εκτεταμένες επιλογές για να ρυθμίσετε τη συμπεριφορά των πολύ τυπογραφικών παραμέτρων και a ομάδα ονομάτων κλάσης για να αλλάξετε την εμφάνιση του εργαλείου υποτίτλων. Το tooltip λειτουργεί καλά σε παλαιότερο πρόγραμμα περιήγησης όπως το IE9 και, αν χρειαστεί, το IE8 με μερικές προσαρμογές.
Bubb - Το Bubb μπορεί να είναι κατάλληλο για προχωρημένους χρήστες του JavaScript. Χρησιμοποιώντας το εκτεταμένα API, εκτός από την εμφάνιση απλού κειμένου, μπορείτε να προσθέσετε με προγραμματισμό ένα πιο περίπλοκο περιεχόμενο HTML στη συμβουλή εργαλείου. Είναι πολύ δροσερό. μπορείτε να ανατρέξετε στα Έγγραφα στα παραδείγματα.
Popper - Περιέχει τεχνική αφαίρεση για να δημιουργήσει κάτι τέτοιο “σκάει”, όπως μια επεξήγηση εργαλείου, ένα αναδυόμενο παράθυρο και τα drop-down. Το TippyJS το χρησιμοποιεί ως θεμέλιο της βιβλιοθήκης και χρησιμοποιείται από μεγάλα ονόματα στο διαδίκτυο, όπως το Bootstrap, η Microsoft και το Atlassian.
YY Tooltip - Σε αντίθεση με τις άλλες βιβλιοθήκες, YY Tooltip δεν απαιτεί να προσθέσετε ένα στοιχείο HTML ή χαρακτηριστικά. Λειτουργεί πλήρως με το JavaScript και το περιεχόμενο, η θέση και τα χρώματα, ορίζονται σε ένα αντικείμενο αντί σε ένα στοιχείο HTML. Είναι τέλειο για χρήση σε συνδυασμό με πλήρη εφαρμογή ιστού JavaScript.
Position.js - Μια άλλη εξαιρετική εγγενής βιβλιοθήκη JavaScript για τη δημιουργία tooltips, Position.js παρέχει ένα GUI για να διαμορφώσει τη λειτουργία και απλά να αντιγράψει και να επικολλήσει τον κώδικα που παράγεται εκεί. Το Position.js μπορεί να χρησιμοποιηθεί σε συνδυασμό με το React.js ή το Vue.js.
Υποσημείωση εργαλείου - Αυτή η βιβλιοθήκη παρέχει 14 επιλογές για την εμφάνιση της επεξήγησης εργαλείων. όπως στο σωστά, αριστερά, κάτω μέρος, αριστερό κέντρο, δεξιά-άκρη, κάτω-κέντρο, κλπ. Επιπλέον, είναι επίσης αρκετά έξυπνο που θα μπορούσε ρυθμίστε τη θέση του υποδείγματος με βάση τον διαθέσιμο χώρο γύρω από τη συμβουλή εργαλείου. Δείτε το demo.
MouseTip - Αυτή η βιβλιοθήκη JavaScrtipt θα δημιουργήσει ένα που θα μετακινηθεί κατά μήκος της θέσης του δρομέα. Η επεξήγηση εργαλείου είναι διαμορφωμένη με μη τυπικό ποντίκι- παρά να χρησιμοποιήσετε το HTML5 δεδομένα- Χαρακτηριστικό. Το ποντίκι είναι διαθέσιμο ως μονάδα NPM.
Εσωτερικά - Αρκετά παρόμοια με το MousetTip, την επεξήγηση εργαλείων που δημιουργείται από αυτήν τη βιβλιοθήκη ακολουθεί τη θέση του δρομέα. Τα πάντα διαμορφώνονται μέσω του αντικειμένου JavaScript αντί του HTML και του Τα χαρακτηριστικά γνωρίσματα κατασκευάζονται επίσης για σύγχρονα προγράμματα περιήγησης. Είναι ελαφρύ και γρήγορο.
MTip - Μια βιβλιοθήκη JavaScript για το εργαλείο επερώτησης με μεγάλη συμβατότητα προγράμματος περιήγησης. Είναι συμβατό με το IE8, πλήρως προσαρμόσιμο μέσω των επιλογών, και μπορείτε να προσθέσετε το Tooltip σε οποιοδήποτε στοιχείο ακόμα και σε ένα img (ένα στοιχείο εικόνας).
Bubblesee - μια ελαφριά βιβλιοθήκη JavaScript που παρέχει απλή λειτουργικότητα ενός “εργαλείο”. Είναι εύκολο να χρησιμοποιήσετε τη βιβλιοθήκη JavaScript χωρίς περίπλοκες επιλογές για να προσαρμόσετε την έξοδο. Εάν θέλετε να αλλάξετε την εμφάνιση του εργαλείου, παρέχεται ένα αρχείο Sass. Δείτε το demo.
Συμβουλή - Χτισμένο με τη σύγχρονη σύνταξη JavaScript, ES6, Το Tipfy έχει μέγεθος μόλις 2 KB. Η βιβλιοθήκη παρέχει δύο εκδοχές αρχείων: tipfy.min.js παρέχοντας το σενάριο με σύγχρονη σύνταξη ES6, και tipfy.es5.min.js αν χρειάζεστε συμβατότητα με παλαιότερα προγράμματα περιήγησης. Χρησιμοποιεί δεδομένα- για να προσαρμόσετε την επεξήγηση εργαλείου. ο δεδομένα-tipfy πλευρά, για παράδειγμα, χρησιμοποιείται για να ρυθμίσετε την κατεύθυνση εργαλείου και να την χρησιμοποιήσετε κείμενο-κείμενο για να προσθέσετε το περιεχόμενο του εργαλείου.
jQuery
Εργαλειομηχανή - Αυτή η βιβλιοθήκη παρέχει εκτεταμένες επιλογές για να προσαρμόσετε σχεδόν οτιδήποτε, όπως το θέμα, κινούμενα σχέδια, υποστήριξη αφής, περιεχόμενο, ενεργοποίηση ανοιχτού και κλεισίματος, κ.λπ. Παρέχει επίσης ακροατές προσαρμοσμένων συμβάντων και επανάκλησης που επιτρέπουν στους προγραμματιστές να επεκτείνουν την επεξήγηση εργαλείων με προσαρμοσμένες λειτουργίες. Επίσης, είναι ένα plugin jQuery, το το tooltip θα λειτουργήσει σε παλαιότερο πρόγραμμα περιήγησης όπως το IE6 ανάλογα με την έκδοση jQuery χρησιμοποιείται.
Protip - Ένα άλλο εκτεταμένο plugin jQuery, το Protip υποστηρίζει 49 θέσεις, HTML για το περιεχόμενο του εργαλείου, την υποστήριξη εικονιδίων, προσαρμοσμένες επανακλήσεις, και πολλά άλλα. Το Protip παρέχει ένα GUI που σας επιτρέπει να προσαρμόσετε την επεξήγηση με ευκολία.
PowerTip - Αυτό το plugin jQuery φέρνει επίσης επιλογές και API που παρέχουν στους προγραμματιστές έναν αριθμό διαφορετικών τρόπων για την εφαρμογή των εργαλείων. Υποστηρίζει πλοήγηση πληκτρολογίου. κάνοντας το αναδυόμενο παράθυρο να εμφανίζεται κατά την πλοήγηση στοιχείων με το Αυτί πληκτρολόγιο. Το PowereTip είναι διαθέσιμη ως μονάδα NPM. Μπορεί να χρησιμοποιηθεί με RequireJS και Browserify.
Προσβάσιμο υπόδειγμα εργαλείου Aria - Ένα πρόσθετο jQuery με ενσωματωμένη δυνατότητα προσβασιμότητας είναι η επεξήγηση εργαλείου που έχει σχεδιαστεί για να εμφανίζει ένα παράθυρο διαλόγου με τίτλο, πολλαπλών γραμμών κειμένου και ένα κουμπί κλεισίματος. Είναι μία από τις δικές της στον κατάλογό μας.
TipsJS - Ένα απλό plugin jQuery, αλλά φέρνει αρκετά χαρακτηριστικά χαρακτηριστικά. ο το περιεχόμενο συμβουλής έχει οριστεί με α υποδείγματος εργαλείου δεδομένων Χαρακτηριστικό. Επιπλέον, μπορούμε να τυλίξουμε το περιεχόμενο με ειδικούς χαρακτήρες για να μορφοποιήσουμε το περιεχόμενο παρόμοιο με το μορφοποίηση Markdown. Μπορούμε να χρησιμοποιήσουμε * για να κάνει το περιεχόμενο τολμηρό, ~ για πλάγια γραφή, και ^ για την επικεφαλίδα.
Σκούρο εργαλείο - Αυτή η βιβλιοθήκη παρέχει ορισμένες πραγματικά χρήσιμες λειτουργίες για την ενεργοποίηση της επεξήγησης εργαλείων. Για παράδειγμα, μπορούμε να προσθέσουμε ένα επιβεβαίωση - Ναι και Όχι, σμίκρυνση του φόντου κατά την εμφάνιση της επεξήγησης εργαλείου και προσθήκη στοιχείων HTML στο περιεχόμενο. Νομίζω ότι πρέπει πραγματικά να δείτε τη σελίδα επίδειξης.
Aria Tooltip - Ένα άλλο εργαλείο με ενσωματωμένη δυνατότητα προσβασιμότητας, αυτό το plugin jQuery είναι συμβατό με WAI-ARIA 1.1. Είναι ανταποκρίνεται με τρόπο που μπορείτε παρέχουν διαφορετικές διαμορφώσεις για διαφορετικά μεγέθη προβολής. Το Aria Tooltip είναι διαθέσιμο ως μονάδα NPM που ονομάζεται t-aria-tooltip.
Toolbar.js - Ενώ το άλλο πρόσθετο jQuery μπορεί να εμφανίζει απλό κείμενο ή περιεχόμενο HTML σε μια επεξήγηση εργαλείου, αυτό Το plugin jQuery δημιουργεί μια γραμμή εργαλείων. Η επεξήγηση εργαλείων θα περιέχει δύο ή περισσότερους συνδέσμους με ένα εικονίδιο το οποίο συνήθως θα εκτελέσει μια ενέργεια Κάντε κλικ, όπως οποιαδήποτε γραμμή εργαλείων. Ελέγξτε την τεκμηρίωση και τα παραδείγματα.
VueJS
V-Tooltip - Το V-Tooltip είναι ένα στοιχείο Vue.js που τροφοδοτείται από το Popper.js κάτω από την κουκούλα. Παρέχει ένα νέα οδηγία v-tooltip τα οποία μπορούν να προστεθούν σε οποιοδήποτε στοιχείο για να δημιουργήσουν μια επεξήγηση εργαλείων. ο v-tooltip μπορεί να περιέχει το περιεχόμενο του εργαλείου ή τις επιλογές. Εκτός από το έθιμο v-tooltip μπορείτε επίσης να προσθέσετε την επεξήγηση εργαλείου με το v-popover συστατικό. Με αυτό το στοιχείο, μπορείτε προσθέστε πιο περίπλοκο περιεχόμενο στη συμβουλή εργαλείου με το στοιχείο Vue.js ή HTML.
Υποσημείωση εργαλείου Vue-Bulma - Ένα στοιχείο Vue.js για να δημιουργήσετε μια επεξήγηση βασισμένη στο πλαίσιο UI του Bulma. Αυτή η βιβλιοθήκη αποτελεί μέρος της συνιστώσας του Vue Bulma. Αλλά το το στοιχείο συμβουλής εργαλείου είναι διαθέσιμο ως μονάδα NPM που ονομάζεται vue-bulma-tooltip ότι μπορείτε να το χρησιμοποιήσετε ως ανεξάρτητα εξαρτήματα.
Οδηγία Vue-Tooltip - Συνολικά, είναι παρόμοιο με το στοιχείο V-Tooltip που βασίζεται στο Popper.js και παρέχει την ίδια οδηγία που ονομάζεται v-tooltip. Ωστόσο, δεν φαίνεται να παρέχει το v-popover συστατικό.
Vue-Tippy - Αυτή η βιβλιοθήκη αναδιπλώνει το Tippy.js σε ένα στοιχείο Vue.js. Διαθέτει μια προσαρμοσμένη οδηγία Vue.js που ονομάζεται v-tippy που λειτουργεί σαν ένα χαρακτηριστικό HTML. μπορούμε να προσθέσουμε περιεχόμενο για επεξήγηση εργαλείου ή τις επιλογές για να το προσαρμόσουμε. Κάνει επίσης a προσαρμοσμένη συνιστώσα Vue.js στο περιεχόμενο του εργαλείου χρησιμοποιώντας το html επιλογή.
VueJS-Popover - Μια προσαρμοσμένη έκδοση Vue.js με μια προσαρμοσμένη οδηγία που ονομάζεται v-popover και δύο προσαρμοσμένες συνιστώσες δηλαδή
Vue-Hint - Ένα plugin Vue.js που περιβάλλει το Hint.css. Τα χαρακτηριστικά του plugin v-hint-css για να προσθέσετε την επεξήγηση εργαλείου. Το φέρνει το ίδιο σύνολο επιλογών με το Hint.css, ώστε να μπορείτε να τα προσθέσετε ως αντικείμενο JavaScript ή τροποποιητή Vue.js.
ReactJS
Αντίστροφη Joyride - Ένα στοιχείο React για την εμφάνιση ενός συνόλου εργαλείων που θα το κάνουν καθοδηγήστε τους νέους χρήστες να εξοικειωθούν με τη νέα σας εφαρμογή.
Αντιδράστε Floater - Αυτή η βιβλιοθήκη αναδιπλώνει το Popper.js σε ένα στοιχείο React που ονομάζεται Floater, οπότε έχει τα ίδια υπέροχα χαρακτηριστικά με το Floater's. Μπορείτε να προσθέσετε την επεξήγηση και το αναδυόμενο παράθυρο, και μπορείτε επίσης παίζουν με αυτό το στοιχείο μέσω αυτού του sandbox.
Ανταπόκριση Autotip - Ένα απλό στοιχείο React με το χαρακτηριστικό αυτόματης τοποθέτησης, θα είναι το Autotip ρυθμίστε αυτόματα τη θέση της επεξήγησης εργαλείου όταν αλλάζει ο διαθέσιμος χώρος γύρω από αυτό.
Απάντηση Tippy - Χτισμένο πάνω από τα Tippy.js και Popover.js. Αυτή η βιβλιοθήκη εισάγει ένα Ετικέτα εργαλείου το στοιχείο αυτό μπορείτε να συμπεριλάβετε στην εφαρμογή React.
Αντιδράστε υπαινιγμός - Ένα στοιχείο React που επεκτείνει το Hint.css. Τα στοιχεία προσθέτουν μερικές δυνατότητες που δεν είναι διαθέσιμες στο Hint.css όπως αυτόματη θέση, καθυστέρηση και λειτουργία επανάκλησης.
Περισσότερο
Εργαλειομηχανές Ember - Ένα στοιχείο Ember.js για τη δημιουργία εργαλείων, είναι χτισμένο στην κορυφή του Popper.js. Το στοιχείο είναι επίσης σχεδιασμένο με γνώμονα την Προσβασιμότητα και συνεχίζει να βελτιώνεται για να συμμορφωθεί με την πρακτική των 508 όσον αφορά το θέμα αυτό.
D3 Συμβουλή - ένα πρόσθετο D3.js. Το D3.js είναι μια βιβλιοθήκη JavaScript για απεικόνιση δεδομένων όπως διαγράμματα, χάρτες, διαγράμματα κλπ. Αυτό το plugin σας επιτρέπει να εμφανίσετε μια επεξήγηση πάνω από αυτά τα δεδομένα.
