richiedi subito informazioni chiamando al numero +39 080 4837098

Un tooltip solo con CSS3

22 nov 2012

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


Categoria: CSS
Autore: Francesco

Lascia un commento

Nome: (obbligatorio)


Email: (obbligatoria - non sarà pubblica)


Sito:
Commento: (obbligatorio)

Invia commento


ATTENZIONE: il tuo commento verrà prima moderato e se ritenuto idoneo sarà pubblicato