Επεξηγήσεις στην CSS (CSS Tooltips)

Επεξηγήσεις στην CSS (CSS Tooltips)

Επεξηγήσεις στην CSS

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

Παράδειγμα

<!DOCTYPE html>
<html>

<head>
  <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;
    }
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
  </style>
</head>

<body style="text-align:center;">
  <p>Μετακινήστε το δείκτη του ποντικιού πάνω από το κείμενο που βρίσκεται πρακάτω:</p>

  <div class="tooltip">Ο δείκτης του ποντικιού επάνω μου
    <span class="tooltiptext">Κείμενο επεξήγησης</span>
  </div>

  <p>Παρατηρήστε ότι η θέση της επεξήγησης δεν είναι πολύ καλή. Συνεχίστε να διαβάζετε το άρθρο για να μάθετε πως να τοποθετείτε τις επεξηγήσεις στην επιθυμητή θέση.</p>
</body>

</html>

Αποτέλεσμα

Επεξηγήσεις στην CSS

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

HTML: Χρησιμοποιούμε ένα στοιχείο  <div> ως δοχείο (container) και προσθέτουμε την class “tooltip” σε αυτό. Όταν ο χρήστης μετακινήσει το δείκτη του ποντικιού πάνω από το στοιχείο <div>, τότε θα εμφανιστεί το κείμενο της επεξήγησης.

Το κείμενο της επεξήγησης τοποθετείται σε ένα inline στοιχείο όπως το στοιχείο <span> και του προσθέτουμε την class “tooltiptext”.

CSS: Στην class “tooltip” χρησιμοποιούμε την ιδιότητα position με την τιμή “relative”, η οποία είναι απαραίτητη για να τοποθετήσουμε το κείμενο της επεξήγησης με την ιδιότητα position και την τιμή “absolute”. Στα παραδείγματα παρακάτω θα δούμε περισσότερα για την τοποθέτηση των επεξηγήσεων.

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

Με την ιδιότητα border-radius της CSS3 προσθέτουμε στρογγυλά άκρα στο κείμενο της επεξήγησης.

Ο selector :hover χρησιμοποιείται για να δείξουμε το κείμενο της επεξήγησης όταν ο χρήστης μετακινήσει το δείκτη του ποντικιού πάνω από το στοιχείο <div> με την class “tooltip”.

Τοποθέτηση Tooltip

Οι επεξηγήσεις στην CSS μπορούν να τοποθετηθούν δεξιά, αριστερά, πάνω ή κάτω από το στοιχείο δοχείο στο οποίο ανήκει η επεξήγηση.

Δεξιά Τοποθέτηση

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

Παράδειγμα

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

Αποτέλεσμα

Επεξηγήσεις στην CSS

Αριστερή Τοποθέτηση

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

Παράδειγμα

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

Αποτέλεσμα

Επεξηγήσεις στην CSS

Πάνω Τοποθέτηση

Στο παρακάτω παράδειγμα τοποθετούμε το κείμενο της επεξήγησης στο πάνω μέρος του στοιχείου δοχείου <div>. Χρησιμοποιούμε την ιδιότητα margin-left: -60px; για να κεντράρουμε την επεξήγηση πάνω από το κείμενο στο οποίο ανήκει η επεξήγηση. Την ορίζουμε στα μισά του πλάτους (120/2 = 60). 

Παράδειγμα

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px;
}

Αποτέλεσμα

Επεξηγήσεις στην CSS

Κάτω Τοποθέτηση

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

Παράδειγμα

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%; 
  margin-left: -60px;  
}

Αποτέλεσμα

Επεξηγήσεις στην CSS

Απάντηση

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