Tooltips cu CSS

Tooltips sunt descrieri de avertizare explicative pentru un anumit text sau informatie. Ceva asemanator in HTML este atributul title ce face acelasi lucru, afiseaza o descriere de un linck sau de o imagine de exemplu pune mouse-ul aiciacesta este un exemplu de avertizare

Tooltips este si are acelas efect precum atrubutul title dar diferenta este urmatoarea cu primul se poate personaliza: culoarea de fond , textul etc.

In acest caz vom vedea cum se creeaza un tooltips folosind stilul CSS fara nici un fel de Javascript care face mai lenta o pagina web sau blog. Poti vedea rezulttul aici.treci cu mouser-ul pesteacesta este un tooltips realizat cu CSS la trecerea mouse-ului peste el afiseaza o descriere si va dispare o data cu retragerea lui

Pentru aplicarea acestui truc mergi la Aspect --> Editare HTML si inainte de ]]></b:skin> adaugi urmatoarele date:

a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}

salvezi modificarile.

Si acum ori de cate ori ai nevoie sa adaugi o explicatie sau informatie pe un linck sau imagine vei folosi urmatorul cod:

<a class="tooltip">text de proba<span>Aici vine scrisa informatia care doresti sa apara la trecerea de mouse</span></a>

In acest cod ai doar trei lucruri de tinut minte:
Ori de cate ori folosesti codul de mai sus stilul class="tooltip" nu trebuie sa lipseasca.
Inlocuieste text proba si Aici vine scrisa informatia care doresti sa apara la trecerea de mouse cu ce doresi sa apara.