CSS εικονίδια εργαλείων
- Προηγούμενη σελίδα CSS κινήσεις
- Επόμενη σελίδα CSS στυλ εικόνων
Δημιουργία tooltip μέσω CSS (Tooltip).
Παρουσίαση: tooltip
Παράδειγμα
Όταν ο χρήστης τοποθετεί το ποντίκι πάνω στο στοιχείο, το tooltip συνήθως χρησιμοποιείται για να παρέχει πρόσθετη πληροφορία για το περιεχόμενο:
Βασικό tooltip
Δημιουργία ενός tooltip που εμφανίζεται όταν ο χρήστης τοποθετεί το ποντίκι πάνω στο στοιχείο:
Παράδειγμα
<style>
/* Κουτί tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Εάν χρειάζεται να εμφανίζεται μια σημείωση κάτω από το κείμενο που μπορεί να επιλεγεί */
}
/* Κείμενο tooltip */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Προσδιορισμός του κειμένου του tooltip - δείτε τα παρακάτω παραδείγματα */
position: absolute;
z-index: 1;
}
/* Εμφάνιση του κειμένου του tooltip όταν ο χρήστης τοποθετεί το ποντίκι πάνω στο κουτί του tooltip */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
Παράδειγμα εξήγησης
HTML:
Χρησιμοποιώντας το στοιχείο κουτί (π.χ. <div>) και προσθέτοντας "tooltip" κλάση. Όταν ο χρήστης αναβλέπει στο <div> αυτού, εμφανίζεται το κείμενο της πύλης.
Το κείμενο της πύλης βρίσκεται στην class="tooltiptext" στον ενσωματωμένο στοιχείο (π.χ. <span>)
CSS:
tooltip Η κλάση χρησιμοποιείται position:relativeγια να τοποθετήσετε το κείμενο της πύλης (position:absolute()). Παρακαλώ σημειώστε ότι για το πώς να τοποθετήσετε την πύλη, δείτε τον παρακάτω παράδειγμα.
tooltiptext Η κλάση αποθηκεύει το πραγματικό κείμενο της πύλης. Δεδομένου ότι είναι κρυφή από προεπιλογή και γίνεται ορατή όταν ο χρήστης αναβλέπει, προσθέσαμε μερικά βασικά στυλ: πλάτος 120 pixels, μαύρη παρασκηνία, λευκό κείμενο, κεντρισμένο κείμενο και περιθώρια επάνω και κάτω 5px (padding).
CSS border-radius Η παραμέτρος χρησιμοποιείται για να προσθέσει γωνίες στην πύλη.
Όταν ο χρήστης κινεί το ποντίκι του στο <div> με την κλάση "tooltip",:hover Ο επιλογέας χρησιμοποιείται για να εμφανίσει το κείμενο της πύλης.
Τοποθέτηση πύλης εργαλείου
Σε αυτό το παράδειγμα, η πύλη βρίσκεται στο δεξί του κειμένου που μπορεί να αναβληθεί (<div>)left:105%()). Επιπλέον, παρακαλώ σημειώστε ότιtop:-5px Χρησιμοποιείται για να τοποθετήσετε το στοιχείο στο κέντρο του στοιχείου κουτί. Χρησιμοποιούμε τον αριθμό 5 επειδή το περιεχόμενο της πύλης έχει περιθώρια επάνω και κάτω 5px. Αν προσθέσετε περιθώρια, παρακαλώ προσθέστε και top Η τιμή της παραμέτρου, για να διασφαλιστεί ότι παραμένει στο κέντρο. Εάν θέλετε να τοποθετήσετε την πύλη από την αριστερά, ισχύει και για αυτό.
Πύλη εργαλείου tip από δεξιά
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Αποτέλεσμα:
Πύλη εργαλείου tip από αριστερά
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Αποτέλεσμα:
Αν θέλετε η πύλη να βρίσκεται από πάνω ή από κάτω, δείτε τον παρακάτω παράδειγμα. Λάβετε υπόψη ότι χρησιμοποιήσαμε το παραμέτρο του αριστερού περιθωρίου -60 pixels (margin-left). Αυτό είναι για να κεντρίσουμε την πύλη με το κείμενο που μπορεί να αναβληθεί. Η τιμή αυτή είναι η μισή πλάτος της πύλης (120/2 = 60).
Πύλη εργαλείου tip από πάνω
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Χρησιμοποιήστε τη μισή πλάτος (120/2 = 60), για να κεντρίσετε την πύλη */
}
Αποτέλεσμα:
Πύλη εργαλείου tip από κάτω
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Χρησιμοποιήστε τη μισή πλάτος (120/2 = 60), για να κεντρίσετε την πύλη */
}
Αποτέλεσμα:
Πύλη εργαλείου tip
Για να δημιουργήσετε μια πύλη που εμφανίζεται στην καθορισμένη πλευρά του εργαλείου tip, προσθέστε το περιεχόμενο "κενό" στο εργαλείο tip και χρησιμοποιήστε την κλάση του ψευδοεлементου ::after και content ιδιότητες. Το βέλος本身 δημιουργείται με τη χρήση των περιφερικών γραμμών. Αυτό κάνει την tool tip να φαίνεται σαν αερόλιθος.
Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε βέλος στο κάτω μέρος της tool tip:
κάτω βέλος
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: μαύρο διαφανές διαφανές διαφανές;
}
Αποτέλεσμα:
Παράδειγμα εξήγησης
Τοποθετήστε το βέλος μέσα στην tool tip:top: 100% Τοποθετήστε το βέλος στο κάτω μέρος της tool tip.left: 50% θα κάνει το βέλος να είναι στο κέντρο.
Σημείωση:border-width Η ιδιότητα καθορίζει το μέγεθος του βέλου. Αν αλλάξετε αυτή τη ρύθμιση, μην ξεχάσετε να αλλάξετε και margin-left Αλλάξτε την τιμή σε ίδια τιμή. Αυτό θα κάνει το βέλος να είναι στο κέντρο.
border-color χρησιμοποιείται για να μετατρέψει το περιεχόμενο σε βέλος. Θα ρυθμίσουμε την επάνω στεφάνη σε μαύρο και τις υπόλοιπες σε διαφανές. Αν όλες οι πλευρές είναι μαύρες, τελικά θα έχουμε ένα μαύρο τετράγωνο πλαίσιο.
Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε βέλος στην κορυφή της tool tip. Λάβετε υπόψη ότι αυτή τη φορά ρύθμισε το χρώμα της κάτω στεφάνης:
κορυφαίο βέλος
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: διαφανές διαφανές μαύρο διαφανές;
}
Αποτέλεσμα:
Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε βέλος στα αριστερά της tool tip:
αριστερό βέλος
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: διαφανές μαύρο διαφανές διαφανές;
}
Αποτέλεσμα:
Αυτό το παράδειγμα δείχνει πώς να προσθέσουμε βέλος στα δεξιά της tool tip:
πάνω βέλος
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: διαφανές διαφανές διαφανές μαύρο;
}
Αποτέλεσμα:
Tooltip που εισέρχεται με αργά
Αν θέλετε να χρησιμοποιήσετε τη διαφάνεια για να εισέλθετε και να εξέλθετε από το κείμενο της ετικέτας εργαλείου που θα εμφανιστεί, μπορείτε να χρησιμοποιήσετε το CSS transition μαζί με ιδιότητα Χρησιμοποιώντας την ιδιότητα και την ιδιότητα transition μαζί, και μετατρέπεται σε πλήρως μη ορατή σε συγκεκριμένο δευτερόλεπτο (π.χ. 1 δευτερόλεπτο) από πλήρως μη ορατή σε 100% ορατή:
Παράδειγμα
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Προηγούμενη σελίδα CSS κινήσεις
- Επόμενη σελίδα CSS στυλ εικόνων
