Tooltip Con HTML e CSS | Informatica generale

Seguici con RSS

Etichette

Glossario

Tutto

Collegamenti web

Il tuo IP:

38.107.191.81

Tooltip Con HTML e CSS

Scritto da Federica

Venerdì 18 Gennaio 2008 17:07

Per creare facilmente un tooltip, senza dover ricorrere al javascript, si può utilizzare l'html associato al css

Questo esempio è stato testato su Firefox, Konqueror, Internet explorer 6 e internet explorer 7.

Il segreto sta nell'includere uno in un tag <a>
<a href="http://www......." class="tooltip"><img class="tooltip" src="/tooltip.png">testo del tooltip"</a>

e poi inserire nel css un controllo che descrive il tag <a> come link e uno che descrive lo relativo al tag <a> per lo stato over
.tooltip {
 border: none;
}

a span.tt-container
{
 display:none;
}

a:hover {
 position: relative;
 text-decoration: none;
 border-style: none;
}

a:hover span.tt-container {
 background: #FFC8CE;
 border: 1px solid #CC0000;
 display:block;
 height: 10em;
 position: absolute;
 top: -10em;
 left: 1em;
 z-index: 50;
 width: 15em;
 padding: 3px;
}

a:hover span.tt-text {
 padding: 10px;
 text-decoration: none;
 font-weight: normal;
}

Se vuoi visualizzare un esempio posiziona il mouse su questa icona

Argomenti correlati: CSS web Programmazione HTML