În trecut, dezvoltatorii web foloseau scripturi JavaScript complexe pentru a afișa un mesaj explicativ atunci când utilizatorul poziționa cursorul mouse-ului peste un link.
În prezent, există o metodă mult mai curată și eficientă pentru a realiza casete de sugestii (tooltips) folosind exclusiv reguli CSS:
a:hover {
background: #ffffff;
text-decoration: none;
} /* Culoarea de fundal este necesară pentru compatibilitate cu IE6 */
a.tooltip span {
display: none;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
}
a.tooltip:hover span {
display: inline;
position: absolute;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
}Pentru a integra această casetă în pagină, structura HTML necesară este foarte simplă:
text normal <a class="tooltip" href="#">link<span>Acesta este textul care apare în casetă</span></a>.Această tehnică asigură o încărcare rapidă a paginii, elimină dependența de fișiere script externe și funcționează fluent în majoritatea browserelor web.
