Επεξήγηση εργαλείου Html όταν τοποθετείτε το δείκτη του ποντικιού με μια ερώτηση. Πώς να δημιουργήσετε απλές συμβουλές εργαλείων στο CSS3

Έχω εμπειρία στην τοποθέτηση του χαρακτηριστικού title="" σε ετικέτες τίτλου και συνδέσμους πρώτου επιπέδου.

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

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

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

Σύνδεσμος προς χρήσιμο πόρο

Ας ορίσουμε το βασικό στυλ για την τάξη συμβουλή εργαλείου:

Επεξήγηση εργαλείου (οθόνη: ενσωματωμένη, θέση: σχετική; )

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

Επεξήγηση εργαλείου:hover:after( background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); αριστερά: 20 % padding: 5px 15px: 98;

Χρησιμοποιούμε την ψευδοκλάση :hover, η οποία επιλέγει ένα στοιχείο όταν το ποντίκι τοποθετείται πάνω του, και το :after pseudo-class, που προσθέτει περιεχόμενο μετά το επιλεγμένο στοιχείο. Το φόντο έχει οριστεί σε μερικώς διαφανές και για προγράμματα περιήγησης που δεν υποστηρίζουν τη μορφή χρώματος RGBA, το χρώμα φόντου ορίζεται σε γκρι.

Οι στρογγυλεμένες γωνίες δημιουργούνται χρησιμοποιώντας το χαρακτηριστικό border-radius. Ορίστε το χρώμα του κειμένου σε λευκό. Τέλος, τοποθετούμε το μπλοκ επεξήγησης εργαλείου και προσθέτουμε padding.

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

Περιεχόμενο: attr(τίτλος);

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

Σύνδεσμος προς χρήσιμο πόρο

Για να ολοκληρώσετε, πρέπει να προσθέσετε ένα βέλος στο κάτω μέρος της επεξήγησης εργαλείου. Χρησιμοποιούμε την ψευδο-κλάση:before και στυλ για το πλαίσιο:

Επεξήγηση εργαλείου:hover:before( περίγραμμα: συμπαγές; περίγραμμα-χρώμα: #333 διαφανές; πλάτος περιγράμματος: 6 εικονοστοιχεία 6 εικονοστοιχεία 0 6 εικονοστοιχεία; κάτω: 20 εικονοστοιχεία; περιεχόμενο: ""; αριστερά: 50%; θέση: απόλυτη; δείκτης z: 99 )

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

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

Προβολή επίδειξης | Λήψη πηγαίου κώδικα

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

Ρύθμιση εγγράφου

Πρέπει να δημιουργήσουμε ένα έγγραφο HTML και να ορίσουμε τη σήμανση πηγής:

Έχω προσθέσει έναν σύνδεσμο στο Normalize.css που βοηθά στην επαναφορά όλων των στυλ του προγράμματος περιήγησης στις προεπιλογές και διασφαλίζει ότι κάθε στοιχείο φαίνεται το ίδιο σε όλα τα προγράμματα περιήγησης. Σε αντίθεση με μια τυπική επαναφορά CSS, το Normalize.css δεν καταργεί όλα τα προεπιλεγμένα στυλ, επομένως δεν θα χρειαστεί να ξαναγράψετε το στυλ κάθε στοιχείου από την αρχή.

Έχω δημιουργήσει ένα div με μια κλάση κοντέινερ στην οποία θα τοποθετήσουμε τα βασικά παραδείγματα συμβουλών εργαλείων HTML. Εδώ είναι τα στυλ για το σώμα και την κατηγορία .container:

σώμα ( γραμματοσειρά-οικογένεια: "Work Sans", sans-serif; μέγεθος γραμματοσειράς: 1,5 εκατ.; ύψος γραμμής: 1,4 εκατ.; βάρος γραμματοσειράς: 700; χρώμα φόντου: #28ABE3; χρώμα: #fff; ) .container ( πλάτος: 800 εικονοστοιχεία, περιθώριο: 100 εικονοστοιχεία αυτόματα, φόντο: ακτινική διαβάθμιση (κύκλος πιο απομακρυσμένη γωνία στα 400 εικονοστοιχεία 250 εικονοστοιχεία , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Κεντράρω το div του κοντέινερ ορίζοντας margin-αριστερά και margin-right σε αυτόματο . Πρόσθεσε επίσης κάποιο στυλ στο τμήμα του σώματος για να φαίνεται καλύτερο.

Αποφάσισα να προσθέσω μια μικρή ελαφριά διαβάθμιση CSS για το φόντο. Εάν το πρόγραμμα περιήγησής σας δεν υποστηρίζει διαβαθμίσεις CSS ( αυτό ισχύει κυρίως για τα IE 8 και 9), το χρώμα φόντου θα επανέλθει στο προεπιλεγμένο μπλε ( χρώμα φόντου τμήματος σώματος).

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

• Επεξήγηση εργαλείου
• Επεξήγηση εργαλείου κάτω
• Επεξήγηση εργαλείου αριστερά
• Επεξήγηση εργαλείου δεξιά

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

Tooltip-wrapper ( padding: 160px 0; text-align: center; ) .tooltip-wrapper li ( style-list: none; display: inline-block; margin: 0 10px; ) .tooltip-wrapper li a ( color: # fff text-decoration: none;

Ας ρίξουμε μια πιο προσεκτική ματιά στην ετικέτα αγκύρωσης:

Επεξήγηση εργαλείου αριστερά

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

Μπορείτε επίσης να δείτε το προσαρμοσμένο χαρακτηριστικό data-, το οποίο περιέχει το κείμενο της επεξήγησης εργαλείου HTML.

Δημιουργία της κλάσης συμβουλής εργαλείου

Παρακάτω είναι ο κώδικας για την κατηγορία συμβουλών εργαλείου:

Επεξήγηση εργαλείου ( position: σχετική; ) .tooltip:after ( position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight : έντονο χρώμα: #fff; ορατότητα: κρυφό .tooltip:hover:after (αδιαφάνεια: 1; ορατότητα: ορατή; )

Η ίδια η επεξήγηση εργαλείου hover HTML είναι ένα ψευδοστοιχείο :after και τοποθετείται απολύτως. Αυτός είναι ο λόγος για τον οποίο είναι απαραίτητο να αντιστοιχίσετε μια σχετική θέση στο στοιχείο αγκύρωσης. Πρόσθεσα μερικά βασικά στυλ, όπως padding, περίγραμμα, μέγεθος γραμματοσειράς και πλάτος. Ας ρίξουμε μια πιο προσεκτική ματιά στην ιδιότητα περιεχομένου.

Περιέχει attr() - μια τιμή που αποθηκεύει την προσαρμοσμένη επεξήγηση εργαλείου δεδομένων μας και τη χρησιμοποιεί για να εμφανίσει το κείμενο της ίδιας της επεξήγησης εργαλείου. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο όνομα αντί για data-tooltip, απλώς βεβαιωθείτε ότι ξεκινά με data- . Μπορείτε να μάθετε περισσότερα για αυτά τα χαρακτηριστικά εδώ.

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

Για να δώσουμε στην επεξήγηση εργαλείου hover HTML ένα εφέ κινούμενης εικόνας, χρησιμοποιούμε την ιδιότητα μετάβασης. Σημειώστε την τιμή .25s, η οποία καθορίζει την καθυστέρηση πριν από την εμφάνιση ή την απόκρυψη της επεξήγησης εργαλείου. Έτσι, δεν θα εμφανίζεται εάν τοποθετήσετε το δείκτη του ποντικιού πάνω από το κείμενο κατά λάθος, αλλά μόνο εάν τοποθετήσετε το δείκτη του ποντικιού πάνω από το κείμενο για μεγαλύτερο χρονικό διάστημα. Επίσης έβαλα την αδιαφάνεια στο 0 και την ορατότητα σε κρυφή. Δεν μπορούμε να χρησιμοποιήσουμε την οθόνη: κανένα; , γιατί το στοιχείο θα εξαφανιστεί εντελώς και δεν θα δούμε εφέ μετάβασης. Η αδιαφάνεια και η ορατότητα αλλάζουν όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο.

Αποτέλεσμα:

Κοίτα

Σημείωση: Άλλαξα/κατάργησα μέρος της σήμανσης και του στυλ στην επίδειξη στο CodePen. Για να δείτε το τελικό αποτέλεσμα, ρίξτε μια ματιά στο demo στο τέλος αυτού του άρθρου.

Προσθήκη κίνησης

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

/*Αρχική θέση συμβουλής εργαλείου*/ .tooltip-top:after ( κάτω: 150%; αριστερά: 0; ) .tooltip-bottom:after ( top: 155%; αριστερά: 0; ) .tooltip-left:after ( δεξιά: 130%; ελάχ. πλάτος: 100 εικονοστοιχεία; ) .tooltip-bottom:hover:after ( top: 125%; ) .tooltip-left:hover:after (δεξιά: 110%; ) .tooltip-right:hover:after (αριστερά: 110%; )

Αποφάσισα να προσθέσω αυτή τη λειτουργικότητα σε επιπλέον τάξεις. Έτσι, εάν αντιστοιχίσετε, για παράδειγμα, την κλάση .tooltip-left , η επεξήγηση εργαλείου θα εμφανιστεί στα αριστερά του κειμένου, εάν προσθέσετε .tooltip-top , η επεξήγηση εργαλείου θα εμφανιστεί στην κορυφή κ.λπ.

Προβολή επίδειξης

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

Δημιουργία τριγώνου

Το τελευταίο στοιχείο της συμβουλής εργαλείου είναι ένα μικρό τρίγωνο στη μία πλευρά του μπλοκ. Θα το δημιουργήσουμε χρησιμοποιώντας το :before pseudo-class ( το :after pseudo-class χρησιμοποιείται ήδη για την ίδια την επεξήγηση εργαλείου). Το αντιστοιχίζουμε στις τέσσερις τάξεις θέσης μας έτσι ώστε για καθεμία από αυτές να βγαίνει το τρίγωνο ανάλογα:

/** * Τρίγωνα */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( content: ""; display: block; position: absolute; border- πλάτος: 7px; rgba(0, 0, 0, 0): all .2s ease-in-out .25s top:hover:fore, .tooltip-bottom:hover:before; αριστερά:hover:before, .tooltip-right:hover:before ( αδιαφάνεια: 1; ορατότητα: ορατή; )

Δημιουργούμε ένα τρίγωνο δίνοντας πλάτος στο περίγραμμα όταν το ίδιο το στοιχείο δεν έχει πλάτος ή ύψος. Σε αυτήν την περίπτωση, το πλάτος του πλαισίου ορίζεται στα 7 pixel. Το χρώμα του πλαισίου είναι εντελώς διαφανές, κάτι που είναι πολύ σημαντικό. Στο παρακάτω απόσπασμα κώδικα, αντιστοιχίζω ένα χρώμα στην αντίστοιχη πλευρά του πλαισίου, το οποίο μου επιτρέπει να ορίσω το σχήμα του τριγώνου.

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

/*Θέση έναρξης του τριγώνου*/ .tooltip-top:before ( επάνω: -51%; αριστερά: 50%; μετασχηματισμός: translateX(-50%); border-top-color: #fff; ) .tooltip-bottom :before ( κάτω: -56%; αριστερά: 50%, μετασχηματισμός: translateX(-50%); border-bottom-color: #fff; ) .tooltip-left:before ( αριστερά: -31%; επάνω: 15% ; περίγραμμα -αριστερό χρώμα: #fff ) .tooltip-right:before (δεξιά: -31%; επάνω: 15%; περίγραμμα-δεξιά-χρώμα: #fff; ) /* Τελική θέση του τριγώνου */ .tooltip; -top:hover :before ( top: -21%; ) .tooltip-bottom:hover:before ( bottom: -26%; ) .tooltip-left:hover:before ( αριστερά: -11%; ) .tooltip-right :hover:before (δεξιά: -11%; )

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