Tooltips με CSS3 και ΗΤML5

Ας δούμε πως μπορούμε να φτιάξουμε ωραία tooltips χρησιμοποιώντας μόνο CSS3 και HTML5 και ούτε σταγόνα JS.

Ο απλός τρόπος

Αυτόν τον κώδικα μπορούμε να τον χρησιμοποιήσουμε οπουδήποτε χρειαζόμαστε μικρά ωραία tooltips.

<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}
 
.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); 
    margin-top: -24px;
    opacity: 0; 
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; 
 
    transition: all 0.4s ease-in-out; 
}
 
.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

Παίρνουμε ένα στοιχείο (στην περίπτωσή μας span), του προσθέτουμε attribute με το κείμενο που θα εμφανίζετε και παίρνουμε και το pseudoelement ::after. Στο content αυτού του pseudoelement, χρησιμοποιώντας το attr(), βάζουμε στο tooltip μας το κείμενο και μετά στο :hover το δείχνουμε.

Να σημειώσω πως στο webkit δεν θα υπάρχει το ωραίο animation λόγο ενός bug με τα pseudoelements και animations/transitions.

Πιο περίπλοκα tooltips

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

<a class="htooltip" href="http://www.ituts.gr">iTuts.gr
<span>Donec varius consequat lorem, ut ultricies magna tincidunt et
<img height="30px" width="30px" src="http://www.ituts.gr/logo.jpg">
</span>
</a>

.htooltip span { 
    background-color: rgba(0,0,0, 0.8);
    border-radius: 15px 15px 15px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-left: 2px;
    margin-top: -75px;
    opacity: 0; 
    padding: 10px 10px 10px 40px;
    position: absolute;
    text-decoration: none;
    visibility: hidden; 
    width: 350px;
    z-index: 10;
}
 
.htooltip:hover span { 
    opacity: 1;
    visibility: visible;
}
 
.htooltip span img { 
    border: 0 none;
    float: left;
    margin: -71px 0 0 -234px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
 
.htooltip:hover span img {
    opacity: 1;
    visibility: visible;
}

Αυτό ήταν, τόσο απλό. Μπορείτε να τα κάνετε customize όσο θέλετε ώστε να τα φέρετε στα μέτρα σας.

Κάνουμε Like,tweet,+1 και ότι άλλο σκεφτείτε.
Όλα αυτά ενθαρρύνουν εμένα και τους υπόλοιπους συγγραφείς να συνεχίσουμε να γράφουμε.

Demo

Shortlink URL:

Δημήτρης Α.

Tagged as:css3 html5 tooltip

Κατηγορία: HTML5 Web Design

[!] Αναφέρετε αυτό το άρθρο

Γίνετε επεξεργασία, Παρακαλώ περιμένετε...

+ 63.3

Ο Συγγραφέας

Σπούδασε Τεχνικός Δικτύων στο IT Step, στο Donentsk της Ουκρανίας. Δουλεύει ως προγραμματιστής στην Livevol Inc. Ασχολείται με τους υπολογιστές, το ίντερνετ, με την τεχνολογία και τον προγραμματισμό, και φυσικά το gaming! Λατρεύει το Wordpress και το Centos. Ακούει Hip-Hop και λατρεύει τα strategy games.