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
ATTENZIONE: il tuo commento verrà prima moderato e se ritenuto idoneo sarà pubblicato
© 2007-2024 - ATTIVA WEB - Internet agency - P. iva 02645880739
Realizzazione siti internet Martina Franca, ecommerce Martina Franca
Via Giacomo Puccini 23 - 74015 Martina Franca (TA) - Privacy & Cookie Law