Microtip - CSS Tooltip Βιβλιοθήκη με εγγενείς δυνατότητες προσβασιμότητας

Μπορείτε να κάνετε μια γρήγορη αναζήτηση στο GitHub για να βρείτε δεκάδες προσαρμοσμένες βιβλιοθήκες εργαλείων. Και φαίνεται ότι οι καινούργιοι χτύπησαν τον ιστό κάθε μήνα.

Το Microtip είναι ένας μοναδικός πόρος δεδομένου ότι τρέχει σε καθαρά CSS tooltips, προσφέρει προσαρμοσμένη αισθητική και χρησιμοποιεί τον πηγαίο κώδικα που είναι πλήρως προσβάσιμο για όλους τους χρήστες.

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

Στην αρχική σελίδα, θα βρείτε έναν σύνδεσμο λήψης στη βιβλιοθήκη Microtip μαζί με ένα σωρό demos κώδικα.

Μπορείτε να πάρετε αυτή τη ρύθμιση μέσω ενός διαχειριστή πακέτων, απευθείας λήψη ή τραβώντας τον απευθείας από ένα CDN. Το έρχεται με ένα αρχείο CSS και αυτό είναι βασικά το μόνο που χρειάζεστε.

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

Ακολουθεί ένας δείκτης κώδικα εργαλείου που προσαρτάται σε ένα στοιχείο κουμπιού με μια προσαρμοσμένη θέση:

Δεν έχει σωστό κώδικα?

Αυτή η βιβλιοθήκη είναι εξαιρετικά ελαφριά με συνολικά 1KB minified. Αυτό είναι απλώς τρελό λαμβάνοντας υπόψη πόσο παίρνετε με αυτά τα tooltips.

Οι ιδιότητες προσαρμοσμένου CSS μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών HTML για να ορίσετε το μέγεθος της γραμματοσειράς, το στυλ μετάβασης, τη χαλάρωση και πολλές άλλες ρυθμίσεις.

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

Ρίξτε μια ματιά στην ενότητα προσαρμογής στην κύρια σελίδα για περισσότερες λεπτομέρειες. Τα πάντα τρέχουν μέσω HTML και CSS έτσι δεν χρειάζεστε οποιαδήποτε γνώση scripting για να πάρει αυτό το έργο.

Το Microtip είναι εξαιρετικό εύκολο στη ρύθμιση και προσαρμογή οπότε αν γνωρίζετε τουλάχιστον την βασική κωδικοποίηση των frontend, θα είστε εντάξει.

Αλλά ρίξτε μια ματιά στο repo GitHub για περισσότερες πληροφορίες εγκατάστασης & για να πάρετε ένα αντίγραφο του φύλλου στυλ.

Εάν έχετε ερωτήσεις ή προτάσεις για νέες λειτουργίες, μπορείτε επίσης να αφήσετε μια γραμμή στον δημιουργό στο Twitter @_ighosh.