Tooltips con CSS en forma de burbuja

Este es otro tooltip con CSS que tiene forma de burbuja y que servir? muy bien para dar informaci?n extra sobre alg?n texto. No usaremos nada de scripts, s?lo un par de im?genes y CSS.

Puedes ver el ejemplo pasando el cursor por las palabras que parecen enlace:

Un tooltip?Hola! Soy un tooltip de ejemplo hecho con CSS (tambi�n llamada descripci?n emergente) es una herramienta de ayuda visual patentada por Microsoft el 19 de diciembre de 2002 que funciona al situar o pulsar con el rat?n sobre alg?n elemento gr?fico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Como la forma de la burbuja es una imagen podr?amos editar la imagen y obtener otro color por ejemplo rosa o azul:

Un tooltip?Hola! Soy un tooltip de ejemplo hecho con CSS (tambi�n llamada descripci?n emergente) es una herramienta de ayuda visual patentada por Microsoft el 19 de diciembre de 2002 que funciona al situar o pulsar con el rat?n sobre alg?n elemento gr?fico, mostrando una ayuda adicional para informar?Hola! Soy un tooltip de ejemplo hecho con CSS al usuario de la finalidad del elemento sobre el que se encuentra.

Para colocar este tipo de tooltip s?lo entra en Dise?o | Edici?n de HTML y antes de
]]></b:skin> pega lo siguiente:

/* Tooltip 1 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripci?n */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZw3a9J_oBp-3TbrEXqy02EJF3KT_ci172gxVvzfihWTCw_MxlFP_gMkXxCKdS0iSZoK1RyL5VRdrEyB9srMpkd5kGvN6osDBN2Iwfps_OpBxSE3xg4pcVybzO7FyBNxaTaVIUJs9aaa5C/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaZXKo0hXaKVBLAPe5ia7ePQSHBxr65lnQqVojAYhiyHE5DNpqMSOOBOeFb8g9xy-ndmtEXUaNgPW2mEcNqJJfnvjo2qeywm_N8PEpZMtihENRRjfjgrRmauZpthGqI2H3VVWGKTFgieY/) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZw3a9J_oBp-3TbrEXqy02EJF3KT_ci172gxVvzfihWTCw_MxlFP_gMkXxCKdS0iSZoK1RyL5VRdrEyB9srMpkd5kGvN6osDBN2Iwfps_OpBxSE3xg4pcVybzO7FyBNxaTaVIUJs9aaa5C/) no-repeat bottom;
}

Ahora en tu entrada donde vayas a mostrar el tooltip utiliza este c?digo:

<a href="#" class="tt">palabra con tooltip<span class="tooltip"><span class="top"></span><span class="middle">Aquí va la descripción adicional que mostraremos en el tooltip</span><span class="bottom"></span></span></a>

Y as? se sencillo podemos tener un tooltip llamativo s?lo con CSS.
Si quisieras el tooltip rosa entonces en lugar del primer c?digo que hemos a?adido usar?s este:

/* Tooltip 2 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripci?n */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfCi3PnKHFFCrp9SeDnbwnlqmGJ1QfIGPzFyTleXDpRebecK8ZvTuqfIbetPrxExAIxixiduMHysYG8tBRiaifVlqsuS7RRO2nwoKmGIzwQZP4JJxyJBinSNgESScVaGVKWBj_KBjOnyp/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGC9M1y908K0TDOlJy_ST82IQD06ax7Zccc_Ud1MVO_M4qr54bjtdThHpccFHvQ8C8m1ZojH9hvyUSreaCl9qr_s24j3KedLkYTnb5wCljrNnVlzxE9Hr0acbblqryza6romcxUnnRjLP/) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfCi3PnKHFFCrp9SeDnbwnlqmGJ1QfIGPzFyTleXDpRebecK8ZvTuqfIbetPrxExAIxixiduMHysYG8tBRiaifVlqsuS7RRO2nwoKmGIzwQZP4JJxyJBinSNgESScVaGVKWBj_KBjOnyp/) no-repeat bottom;
}

Y si quisieras el azul entonces el c?digo a a?adir ser?a este:

/* Tooltip 3 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripci?n */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbwVhsnIbqe7b1ubIRcjEJ6xKH3kGp-8HY_NeQ1a8NxCdgCxciYmdIIgYbG6D0_YiLqAvzDQZ3X3zQj1Zch_Q_Kjt6MfkmOfHRrA6Km4b_VxeXesAdT93RzEuzkG9dP6Cegh3GBcAz454/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgnGbTQm5nu3coepyD7Yo76ZowslKpS73rtsbWs7iln68duUVDmW6VnkNrvpP2d0r0AVtsfEpfGYnaF1njo5w-4GODfR8O_FewWotyUkoKm7ZHeIFEKiB3KCUgcivbwpkmYvoZQ1PT7Ee/) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbwVhsnIbqe7b1ubIRcjEJ6xKH3kGp-8HY_NeQ1a8NxCdgCxciYmdIIgYbG6D0_YiLqAvzDQZ3X3zQj1Zch_Q_Kjt6MfkmOfHRrA6Km4b_VxeXesAdT93RzEuzkG9dP6Cegh3GBcAz454/) no-repeat bottom;
}

Por supuesto que en cualquiera de los tres podemos modificar el color del texto, el tipo de letra, etc.
Las burbujas como mencion� antes, son una imagen por lo que si deseas otros colores habr?s que editar las im?genes y cambiarlas por las URLs que est?n en el primer c?digo.