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

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Δημιουργήστε συμβουλές εργαλείων με CSS.

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

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

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text

Βασική επεξήγηση εργαλείου

Δημιουργήστε μια επεξήγηση εργαλείου που εμφανίζεται όταν ο χρήστης μετακινεί το ποντίκι πάνω από ένα στοιχείο:

Παράδειγμα

<style>
/* Tooltip container */
.tooltip-local {
  position: relative;
    
display: inline-block;
  border-bottom: 1px dotted 
black; /* If you want dots under the hoverable text */
}
/* Tooltip text 
*/
.tooltip-local .tooltiptext {
  visibility: hidden;
  width: 120px;
    
background-color: black;
  color: #fff;
  text-align: center;
    padding: 5px 0;
  
border-radius: 6px;	  
/* Position the tooltip text - see examples below! */
  position: absolute;
    z-index: 1;
}
/* Show 
the tooltip text when you mouse over the tooltip container */
.tooltip-local:hover 
.tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip-local">Hover 
over me
  <span class="tooltiptext">Tooltip 
text</span>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

Παράδειγμα Επεξήγηση

HTML: Χρησιμοποιήστε ένα στοιχείο κοντέινερ (όπως <div>) και προσθέστε το "tooltip" κατηγορία σε αυτό. Όταν ο χρήστης τοποθετήσει το ποντίκι πάνω από αυτό το <div>, θα εμφανίσει το κείμενο συμβουλής εργαλείου.

Το κείμενο συμβουλής εργαλείου τοποθετείται μέσα σε ένα ενσωματωμένο στοιχείο (όπως <span>) με class="tooltiptext".

CSS: Η κατηγορία επεξήγηση εργαλείου χρησιμοποιεί position:relative, που απαιτείται για την τοποθέτηση του κειμένου συμβουλής εργαλείου (position:absolute). Σημείωση: Δείτε παρακάτω παραδείγματα σχετικά με τον τρόπο τοποθέτησης της επεξήγησης εργαλείου.

Η κλάση tooltiptext περιέχει το πραγματικό κείμενο συμβουλής εργαλείου. είναι κρύβεται από προεπιλογή και θα είναι ορατό με το δείκτη του ποντικιού (δείτε παρακάτω). Έχουμε επίσης προσθέσει μερικά βασικά στυλ σε αυτό: πλάτος 120 px, μαύρο χρώμα φόντου, λευκό χρώμα κειμένου, κεντραρισμένο κείμενο και 5px επάνω και κάτω συμπλήρωση.

Η ιδιότητα CSS border-radius χρησιμοποιείται για την προσθήκη στρογγυλεμένων γωνιών στην επεξήγηση εργαλείου κείμενο.

Ο επιλογέας :hover χρησιμοποιείται για την εμφάνιση του κειμένου συμβουλής εργαλείου όταν ο χρήστης μετακινεί το τοποθετήστε το ποντίκι πάνω από το <div> με class="tooltip".

Συμβουλές εργαλείων τοποθέτησης

Σε αυτό το παράδειγμα, η επεξήγηση εργαλείου τοποθετείται στα δεξιά (αριστερά:105%) του στοιχείου "με δυνατότητα αιώρησης" κείμενο (<div>). Σημειώστε επίσης ότι το top:-5px χρησιμοποιείται για να το τοποθετήσετε στη μέση του στοιχείου του κοντέινερ. Χρησιμοποιούμε τον αριθμό 5 επειδή το κείμενο συμβουλής εργαλείου έχει επάνω και κάτω επένδυση του 5 εικονοστοιχεία. Εάν αυξήσετε την πλήρωσή του, αυξήστε επίσης την τιμή της ιδιότητας top σε βεβαιωθείτε ότι παραμένει στη μέση (αν αυτό είναι κάτι που θέλετε). Το ίδιο ισχύει εάν θέλετε η επεξήγηση εργαλείου να τοποθετηθεί στα αριστερά.

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

.tooltip-local .tooltiptext {
  top: -5px;
  
left: 
105%; 
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

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

.tooltip-local .tooltiptext {
  top: -5px;
  
right: 
105%; 
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Εάν θέλετε η επεξήγηση εργαλείου να εμφανίζεται πάνω ή κάτω, δείτε παραδείγματα παρακάτω. Σημειώστε ότι χρησιμοποιούμε την ιδιότητα margin-left με τιμή μείον 60 εικονοστοιχεία. Αυτό γίνεται για να κεντράρετε την επεξήγηση εργαλείου πάνω/κάτω από το κείμενο με δυνατότητα τοποθέτησης. Εχει οριστεί στο μισό του πλάτους της συμβουλής εργαλείου (120/2=60).

Επάνω Επεξήγηση εργαλείου

.tooltip-local .tooltiptext {
  width: 120px;
  
bottom: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

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

.tooltip-local .tooltiptext {
  width: 120px;
  top: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Επεξήγηση εργαλείου βέλη

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

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

Κάτω βέλος

.tooltip-local .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: black transparent transparent transparent;
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Παράδειγμα Επεξήγηση

Τοποθετήστε το βέλος μέσα στην επεξήγηση εργαλείου: top: 100% θα τοποθετήσει το βέλος στο κάτω μέρος της συμβουλής εργαλείου. αριστερά: 50% θα κεντράρει το βέλος.

Σημείωση: Η ιδιότητα border-width καθορίζει το μέγεθος του βέλος. Εάν το αλλάξετε, αλλάξτε επίσης την τιμή margin-left στην ίδια. Αυτό θα κρατήσει το βέλος στο κέντρο.

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

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

Κορυφαίο βέλος

.tooltip-local .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: transparent transparent black transparent;
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

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

Αριστερό βέλος

.tooltip-local .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: transparent black transparent transparent;
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

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

Δεξί βέλος

.tooltip-local .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: transparent transparent transparent black;
}

Αποτέλεσμα:

Hover over me Tooltip text

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip w/ Right Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Fade In Tooltips (Κινούμενα σχέδια)

Εάν θέλετε να ξεθωριάσει το κείμενο συμβουλής εργαλείου όταν πρόκειται να είναι ορατό, εσείς μπορεί να χρησιμοποιήσει την ιδιότητα μετάβαση CSS μαζί με την αδιαφάνεια ιδιότητα και μεταβείτε από εντελώς αόρατο σε 100% ορατό, σε ορισμένα καθορισμένα δευτερόλεπτα (1 δευτερόλεπτο στο παράδειγμά μας):

Παράδειγμα

.tooltip-local .tooltiptext {
  opacity: 0;
  
transition: opacity 1s;
}
.tooltip-local:hover 
.tooltiptext {
  opacity: 1;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>