Un tooltip solo con CSS3

Oggi vi mostrerò come creare un tooltip utilizzando solo i CSS3 senza l'ausilio di javascript. Ormai sempre più di moda, queste nuvolette informative ce le ritroviamo ovunque a soddisfare ogni nostra curiosità posizionando solo il mouse su un link oppure su una immagine.

Nell'esempio di oggi il tooltip funziona soltanto sui link testuali.

Vediamo un pò come va creato, iniziamo dalla ancora:

<a href="" class="tooltip" title="Questo è il contenuto del mio tooltip">CSS3 Tooltip</a>

e il relativo CSS:

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 300px;
}

E questo infine il risultato:

posiziona qui il mouse