Tooltip con CSS

30 Dicembre 2009 Css
ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Attraverso le proprietà css dei link è possibile visualizzare tooltip statici senza utilizzare funzioni javascript. Per la pagina all'opera: DEMO E questo il codice css:


a:hover {background:#ffffff; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:100px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c; text-align:center;}

Per utilizzare i tooltip il codice html è il seguente:



Per visuzlizzare il tooltip sposta il mouse <a href="#">QUI<span>Ecco il tooltip all'opera!!!</span></a>.

Commenti