Πώς να δημιουργήσετε μια απλή επεξήγηση εργαλείου CSS3

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

Σήμερα θα σας δείξω πώς να δημιουργήσετε μια απλή επεξηγηματική συμβουλή χρησιμοποιώντας HTML και CSS για να εμφανίσετε την ετικέτα τίτλου των υπερσυνδέσμων σας.

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

CSS3 Tooltip

Το επόμενο βήμα είναι να δημιουργήσουμε ένα στοιχειώδες στυλ για την κατηγορία εργαλείων:

.tooltip{display: inline;position: relative;}

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

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Χρησιμοποιούμε τον επιλογέα hover που επιλέγει ένα στοιχείο, σε αυτή την περίπτωση τον σύνδεσμό μας, με το ποντίκι και τον: μετά τον επιλογέα, ο οποίος εισάγει περιεχόμενο μετά το επιλεγμένο στοιχείο. Έχουμε ορίσει ένα μαύρο φόντο με αδιαφάνεια 80%, και για browsers που δεν υποστηρίζουν χρώματα RGBA έχουμε δώσει ένα σκούρο γκρι φόντο.

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

Εκτός από το στυλ και την τοποθέτηση, έχουμε ορίσει την ιδιότητα περιεχομένου:

content: attr(title);

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

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

CSS3 Tooltip 

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

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

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

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

Και εκεί το έχετε, ένα απλό εργαλείο με την ετικέτα τίτλου του στοιχείου που κρέμεται πάνω. Θα μπορούσατε επίσης να χρησιμοποιήσετε αυτό για ετικέτες alt image, ή ακόμα και απλά να βάλετε το δικό σας κείμενο στο CSS για να αναδυθείτε όπου θέλετε.

Μπορείτε να δείτε ένα δουλεύοντας εδώ .

Πώς δημιουργείτε τα εργαλεία; Χρησιμοποιήσατε αυτήν την τεχνική σε έναν ιστότοπο; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, υπόδειξη εικόνας μέσω Shutterstock.