Tooltip Con HTML e CSS

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 <span> in un tag <a>
<a href="http://www......." class="tooltip"><img class="tooltip" src="/tooltip.png"><span class="tt-container"><span class="tt-text">testo del tooltip"</span></span></a>

e poi inserire nel css un controllo che descrive il tag <a> come link e uno che descrive lo <span> 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  testo del tooltip