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

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

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

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

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

Tooltips Demo // περιεχόμενο

Έχω προσθέσει έναν σύνδεσμο στο 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δοχείο:

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

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

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

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

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

  Επεξήγηση εργαλείου ( position: σχετική; ) .tooltip:after ( position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight : bold; χρώμα: #fff; περιεχόμενο: attr(data-tooltip); min-width: 80 px; /* πλάτος: -moz-max-content; */ /* πλάτος: -webkit-max-content; */ opacity : 0; μετάβαση: όλα τα .2s ease-in-out .25s; ορατότητα: κρυφή; z-index: 2; ) .tooltip:hover:after ( αδιαφάνεια: 1; ορατότητα: ορατή; )

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

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

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

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

  Αποτέλεσμα:

  Κοίτα

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

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

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

  /*Αρχική θέση συμβουλής εργαλείου*/ .tooltip-top:after ( κάτω: 150%; αριστερά: 0; ) .tooltip-bottom:after ( top: 155%; αριστερά: 0; ) .tooltip-left:after ( δεξιά: . ) .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- πλάτος: 7 εικονοστοιχεία, στιλ περιγράμματος: συμπαγής, χρώμα περιγράμματος: rgba(0, 0, 0, 0); αδιαφάνεια: 0; μετάβαση: όλα τα .2s ease-in-out .25s; ορατότητα: κρυφή; ) .tooltip- top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before ( αδιαφάνεια: 1, ορατότητα: ορατή; )

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

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

  /*Αρχική θέση του τριγώνου*/ .tooltip-top:before ( επάνω: -51%; αριστερά: 50%; μετασχηματισμός: translateX(-50%); περίγραμμα-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%; )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Βλαντ Μέρζεβιτς

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

  Για παράδειγμα, επέλεξα φωτογραφίες· όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω τους, εμφανίζεται το όνομα της φωτογραφίας. Θα κάνουμε την παραγωγή κειμένου από μόνη της χρησιμοποιώντας την ιδιότητα περιεχομένου και θα πάρουμε την τιμή κειμένου από κάποιο χαρακτηριστικό μέσω attr() . Δυστυχώς, το περιεχόμενο δεν θα λειτουργεί όπως επιθυμείτε σε συνδυασμό με το img, επομένως οι φωτογραφίες εισάγονται στο στοιχείο, στο οποίο προσθέτουμε ένα χαρακτηριστικό data-title με κείμενο συμβουλής εργαλείου. Υπάρχει ο πειρασμός να εισαγάγετε το χαρακτηριστικό τίτλου και να το χρησιμοποιήσετε, αλλά σε αυτήν την περίπτωση θα εμφανιστούν ταυτόχρονα δύο συμβουλές εργαλείων: η μία είναι "native" και η άλλη είναι δική μας. Έτσι χρησιμοποιούμε το δικό μας χαρακτηριστικό data-title, αφού το επιτρέπει η HTML5. Έτσι παίρνουμε παρακάτω κώδικα(παράδειγμα 1).

  Παράδειγμα 1: Κώδικας HTML

  HTML5 IE Cr Op Sa Fx

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

  Ας περάσουμε στο στυλ της συμβουλής εργαλείων μας. Πρώτα πρέπει να το κάνετε να φαίνεται καθόλου. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε το ψευδοστοιχείο ::after, στο οποίο προσθέτουμε περιεχόμενο: attr(data-title) .

  Φωτογραφία::after ( περιεχόμενο: attr(data-title); )

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

  Photo:hover::after ( περιεχόμενο: attr(data-title); )

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

  Παράδειγμα 2: Στυλ επεξήγησης εργαλείου

  HTML5 CSS3 IE Cr Op Sa Fx

  Επεξήγηση εργαλείου CSS .photo ( εμφάνιση: inline-block; /* Ενσωματωμένο στοιχείο μπλοκ*/ θέση: σχετική; /* Σχετική τοποθέτηση*/ ) .photo:hover::after ( περιεχόμενο: attr(data-title); /* Εμφάνιση κειμένου */ θέση: απόλυτη; /* Απόλυτη τοποθέτηση */ αριστερά: 20%; επάνω: 30%; /* Θέση συμβουλής εργαλείου */ z-index: 1; /* Εμφάνιση της επεξήγησης εργαλείου πάνω από άλλα στοιχεία */ φόντο: rgba(255,255,230,0.9); /* Ημιδιαφανές χρώμα φόντου */ οικογένεια γραμματοσειρών: Arial, sans-serif; /* Οικογένεια γραμματοσειράς */ μέγεθος γραμματοσειράς: 11 εικονοστοιχεία; /* Μέγεθος κειμένου επεξήγησης εργαλείου */ πλήρωση: 5 εικονοστοιχεία 10 εικονοστοιχεία; /* Περιθώρια */ περίγραμμα: 1 εικονοστοιχείο συμπαγές #333; /* Επιλογές περιγράμματος */ )

  Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 1.

  Ρύζι. 1. Τύπος επεξήγησης εργαλείου

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

  Παράδειγμα 3. Εμφάνιση επεξήγησης εργαλείου στο κάτω μέρος της φωτογραφίας

  HTML5 CSS3 IE Cr Op Sa Fx

  Επεξήγηση εργαλείου στο CSS .photo ( εμφάνιση: inline-block; /* Inline-block στοιχείο */ position: relative; /* Relative positioning */ ) .photo:hover::after ( content: attr(data-title); / * Εμφάνιση κειμένου */ θέση: απόλυτη, /* Απόλυτη τοποθέτηση */ αριστερά: 0, δεξιά: 0, κάτω: 5 εικονοστοιχεία, /* Θέση επεξήγησης εργαλείου */ δείκτης z: 1, /* Επεξήγηση εργαλείου προβολής πάνω από άλλα στοιχεία */ φόντο : rgba(0,42,167,0.6); /* Ημιδιαφανές χρώμα φόντου */ χρώμα: #fff; /* Χρώμα κειμένου */ στοίχιση κειμένου: κέντρο; /* Στοίχιση κειμένου στο κέντρο */ γραμματοσειρά: Arial , sans-serif ; /* Τύπος γραμματοσειράς */ μέγεθος γραμματοσειράς: 11 εικονοστοιχεία; /* Μέγεθος κειμένου επεξήγησης εργαλείου */ πλήρωση: 5 εικονοστοιχεία 10 εικονοστοιχεία; /* Περιθώρια */ περίγραμμα: 1 εικονοστοιχείο συμπαγές #333; /* Επιλογές περιγράμματος */ )

  Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2.

  

  Ρύζι. 2. Τύπος επεξήγησης εργαλείου

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

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

  Πρόσφατα όταν έκανα μικρό blog, αντιμετώπισα το καθήκον να φτιάξω κομψές, αλλά ταυτόχρονα απλές συμβουλές εργαλείων. Έχοντας προσπαθήσει διαφορετικοί τρόποιδημιουργία ξεχωριστών δοχείων div για συμβουλές εργαλείων ή δημιουργία επεξηγήσεων εργαλείων καθαρό CSS, βρήκα μια καθολική λύση που δεν θα γεμίζει τον κώδικα, θα είναι συμβατή με προγράμματα περιήγησης και ταυτόχρονα θα είναι πολύ απλή στην εφαρμογή.
  Όποιος ενδιαφέρεται για τη δική μου μέθοδο επίλυσης αυτού του απλού προβλήματος, ρωτάω under cat.

  Λύση Η μέθοδος που θα σας προσφέρω είναι αρκετά απλή και αποτελεσματική. Λειτουργεί σε όλα τα προγράμματα περιήγησης, ακόμα και στον IE 6 (δοκιμασμένο από εμένα πολλές φορές). Εύκολο στην αλλαγή και βολικό. Δεν γεμίζει τον κώδικα και το καθιστά σαφές. Μπορεί να αλλάξει εύκολα για να ταιριάζει στις ανάγκες σας. Για παράδειγμα, καθυστερήστε την εμφάνιση μιας επεξήγησης εργαλείου χρησιμοποιώντας το setTimeout ή κάτι άλλο.HTML Ας υποθέσουμε ότι έχουμε μια σελίδα HTML με έναν σύνδεσμο, όταν τοποθετούμε το δείκτη του ποντικιού πάνω της πρέπει να εμφανίσουμε μια επεξήγηση εργαλείου:
  Σύνδεσμος συμβουλών εργαλείων
  Όπως ίσως έχετε ήδη παρατηρήσει από την καταχώριση, χρησιμοποιώ τον προεπεξεργαστή LESS css.
  Συνδεθήκαμε ξεχωριστά αρχείαΣτυλ και σενάρια CSS. Έχουμε επίσης έναν σύνδεσμο και μπλοκ div, το οποίο θα είναι το δοχείο για την επεξήγηση εργαλείου.
  Η προδιαγραφή HTML5 επιτρέπει τη χρήση προσαρμοσμένα χαρακτηριστικάτύπου data-atribute, στο οποίο μπορείτε να αποθηκεύσετε ορισμένες πληροφορίες σχετικά με ένα στοιχείο ή ένα μπλοκ. Είναι στα χαρακτηριστικά δεδομένων που θα αποθηκεύσουμε το κείμενο των συμβουλών εργαλείων.
  Σύνδεσμος
  Για αποθήκευση χρησιμοποιώ το χαρακτηριστικό data-tooltip.
  Τελειώσαμε με την HTML - μπορούμε να προχωρήσουμε στα στυλ CSS Χρησιμοποιώ τη βιβλιοθήκη LESS Elements και την προτείνω σε όλους, επομένως θα γράψω μερικές ιδιότητες χρησιμοποιώντας αυτό το πλαίσιο.
  @import "css/elements.less"; #tooltip ( z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); . στρογγυλεμένο (5 εικονοστοιχεία); )
  Από την καταχώριση είναι ξεκάθαρο ότι στην πρώτη γραμμή συνδέουμε το LE, ορίζουμε το μπλοκ σε div#tooltip απόλυτη τοποθέτησηκαι κρύψτε το. Στη συνέχεια ορίζουμε το μπλοκ χρώμα του φόντουκαι το χρώμα του κειμένου, κάντε τις γωνίες στρογγυλεμένες (5 εικονοστοιχεία) και ορίστε την τιμή διαφάνειας στο 50% jQuery Λοιπόν, τώρα το πιο ενδιαφέρον μέρος - jQuery.
  $.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Έτοιμο τέλος.
  Τώρα προσθέτουμε στην επιλογή όλα τα στοιχεία με το χαρακτηριστικό data-tooltip και όταν τοποθετούμε το δείκτη του ποντικιού πάνω απαραίτητο στοιχείοχρησιμοποιώντας το ποντίκι παίρνουμε την τιμή tooltip και την αποθηκεύουμε σε μια μεταβλητή. Στη συνέχεια, προσθέστε το κείμενο συμβουλής εργαλείου στο μπλοκ #tooltip, δώστε του τις συντεταγμένες του δρομέα από την άκρη της σελίδας + 5 px και τέλος εμφανίστε το μπλοκ με την επεξήγηση εργαλείου στο στο σωστό μέρος. Αφού το ποντίκι φύγει από το στοιχείο, κρύβουμε το μπλοκ #tooltip, διαγράφουμε τα περιεχόμενά του και το επιστρέφουμε στο 0;0;.

  Αυτό είναι όλο!
  Ως αποτέλεσμα, θα έχουμε κάτι σαν αυτό: Επίδειξη

  Χάρη σε αυτό απλό σενάριοόλα τα στοιχεία στη σελίδα που έχουν το χαρακτηριστικό data-tooltip θα λάβουν μια επεξήγηση εργαλείου.

  Σας ευχαριστώ για την προσοχή σας!

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

  Πρόσφατα, όταν έφτιαχνα ένα μικρό blog, ήρθα αντιμέτωπος με το καθήκον να φτιάξω κομψές, αλλά ταυτόχρονα απλές συμβουλές για εργαλεία. Αφού δοκίμασα διαφορετικούς τρόπους δημιουργίας ξεχωριστών κοντέινερ div για συμβουλές εργαλείων ή δημιουργία επεξηγήσεων εργαλείων με καθαρό CSS, βρήκα μια καθολική λύση που δεν θα γεμίζει τον κώδικα, θα είναι συμβατή με προγράμματα περιήγησης και ταυτόχρονα θα είναι πολύ απλή στην εφαρμογή.
  Όποιος ενδιαφέρεται για τη δική μου μέθοδο επίλυσης αυτού του απλού προβλήματος, ρωτάω under cat.

  Λύση Η μέθοδος που θα σας προσφέρω είναι αρκετά απλή και αποτελεσματική. Λειτουργεί σε όλα τα προγράμματα περιήγησης, ακόμα και στον IE 6 (δοκιμασμένο από εμένα πολλές φορές). Εύκολο στην αλλαγή και βολικό. Δεν γεμίζει τον κώδικα και το καθιστά σαφές. Μπορεί να αλλάξει εύκολα για να ταιριάζει στις ανάγκες σας. Για παράδειγμα, καθυστερήστε την εμφάνιση μιας επεξήγησης εργαλείου χρησιμοποιώντας το setTimeout ή κάτι άλλο.HTML Ας υποθέσουμε ότι έχουμε μια σελίδα HTML με έναν σύνδεσμο, όταν τοποθετούμε το δείκτη του ποντικιού πάνω της πρέπει να εμφανίσουμε μια επεξήγηση εργαλείου:
  Σύνδεσμος συμβουλών εργαλείων
  Όπως ίσως έχετε ήδη παρατηρήσει από την καταχώριση, χρησιμοποιώ τον προεπεξεργαστή LESS css.
  Συμπεριλάβαμε στυλ και σενάρια CSS σε ξεχωριστά αρχεία. Έχουμε επίσης έναν σύνδεσμο και ένα μπλοκ div, το οποίο θα είναι το κοντέινερ για την επεξήγηση εργαλείου.
  Η προδιαγραφή HTML5 επιτρέπει τη χρήση προσαρμοσμένων χαρακτηριστικών του τύπου data-atribute, τα οποία μπορούν να αποθηκεύσουν ορισμένες πληροφορίες σχετικά με ένα στοιχείο ή μπλοκ. Είναι στα χαρακτηριστικά δεδομένων που θα αποθηκεύσουμε το κείμενο των συμβουλών εργαλείων.
  Σύνδεσμος
  Για αποθήκευση χρησιμοποιώ το χαρακτηριστικό data-tooltip.
  Τελειώσαμε με την HTML - μπορούμε να προχωρήσουμε στα στυλ CSS Χρησιμοποιώ τη βιβλιοθήκη LESS Elements και την προτείνω σε όλους, επομένως θα γράψω μερικές ιδιότητες χρησιμοποιώντας αυτό το πλαίσιο.
  @import "css/elements.less"; #tooltip ( z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); . στρογγυλεμένο (5 εικονοστοιχεία); )
  Από την καταχώριση είναι ξεκάθαρο ότι στην πρώτη γραμμή συνδέουμε το LE, ορίζουμε το μπλοκ div#tooltip σε απόλυτη θέση και το αποκρύπτουμε. Στη συνέχεια δίνουμε στο μπλοκ ένα χρώμα φόντου και ένα χρώμα κειμένου, στρογγυλεύουμε τις γωνίες (5 εικονοστοιχεία) και ορίζουμε την τιμή διαφάνειας στο 50%. jQuery Τώρα έρχεται το διασκεδαστικό μέρος - jQuery.
  $.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Έτοιμο τέλος.
  Τώρα προσθέτουμε όλα τα στοιχεία με το χαρακτηριστικό data-tooltip στην επιλογή και, όταν τοποθετούμε το δείκτη του ποντικιού πάνω από το επιθυμητό στοιχείο με το ποντίκι, παίρνουμε την τιμή συμβουλής εργαλείου και την αποθηκεύουμε σε μια μεταβλητή. Στη συνέχεια, προσθέτουμε το κείμενο υπόδειξης στο μπλοκ #tooltip, του δίνουμε τις συντεταγμένες του δρομέα από την άκρη της σελίδας + 5 px και τέλος εμφανίζουμε το μπλοκ με την επεξήγηση εργαλείου στη σωστή θέση. Αφού το ποντίκι φύγει από το στοιχείο, κρύβουμε το μπλοκ #tooltip, διαγράφουμε τα περιεχόμενά του και το επιστρέφουμε στο 0;0;.

  Αυτό είναι όλο!
  Ως αποτέλεσμα, θα έχουμε κάτι σαν αυτό: Επίδειξη

  Χάρη σε αυτό το απλό σενάριο, όλα τα στοιχεία της σελίδας που έχουν το χαρακτηριστικό data-tooltip θα λάβουν μια επεξήγηση εργαλείου.

  Σας ευχαριστώ για την προσοχή σας!