Επεξηγήσεις στην 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>

Αποτέλεσμα

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

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%;
}

Αποτέλεσμα

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

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

Παράδειγμα

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

Αποτέλεσμα

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

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

Παράδειγμα

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

Αποτέλεσμα

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

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

Παράδειγμα

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

Αποτέλεσμα

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