Come Creare un Tooltip Solo con i CSS3?

Oggi vediamo come realizzare un sistema di tooltip in modo semplice ed immediato grazie ai CSS3.

Per farlo sfrutteremo la proprietà content e gli pseudoselettori :hover / :after / :before. Il risultato che otterremo sarà il seguente:

Nel caso avessi problemi con la visualizzazione nel box visualizzate l’esempio direttamente da qui: http://jsfiddle.net/gleenk/3TjdM/1/light/

Sfruttiamo l’attributo HTML title

Per quanto riguarda l’html non dovremo far altro che inserire, intorno all’elemento su cui vogliamo mostrare maggiori informazioni, un’àncora con l’attributo title. All’interno di esso scriviamo il testo che vogliamo mostrare al passaggio del mouse, e che recupereremo via CSS:

<p>Integer sit amet dolor sit amet velit fermentum ullamcorper. Curabitur vehicula  eleifend pellentesque. Morbi pharetra consequat auctor. Quisque venenatis nibh sapien, fringilla sodales nunc varius et. Nunc libero nisl, vehicula sit amet mattis vitae, viverra vel metus. Nulla faucibus, odio eget scelerisque elementum, lacus elit venenatis <a href="#" title="Un semplice Tooltip in CSS" class="tooltip">CSS3 Tooltip</a> ligula, fermentum dignissim quam risus a neque.</p>

CSS3, content e pseudoselettori

Passiamo quindi al cuore del nostro sistemino di tooltip. Come anticipato, utilizziamo la proprietà content(title) per recuperare il contenuto che abbiamo inserito nell’attributo della nostra àncora. Utilizziamo quindi lo pseudo-selettore :after per creare un elemento fisico dopo alla nostra ancora (che ha classe tooltip) in combinazione con lo pseudo-selettore :hover per far sì che il tooltip sia visibile solo al passaggio del mouse. Attraverso :before invece creiamo il triangolino. (Per scoprire come fare i triangoli vi ri mando a questo post).

.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:200px;
}
.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Browser e compatibilità

Vi ricordo che sia la proprietà content() che gli pseudoselettori usati, possono essere utilizzati a partire da IE8 e successivi (utilizzando la dichiarazione !DOCTYPE dell’HTML5).

Codice tratto da: How to create a simple CSS3 tooltip