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 (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 (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.

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/AVvXsEiHcoBFel4o5HWSSMB2-kiywbRgHrI-BNZTQkzbcn4p2pFDpfuKPKLn7FYm-qIPJ5wGOblLVEdgFf-A9krOPEmcNmtf5JUEMrfq1wmFeehN_oW7FtThP5ZyOpsKudAXmgpfU633C5Vq1Ok0/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBw3PT6uuFZcvYAZWQJRLSWmI3S9lwXRNaPXQzbIIh7UDy9Mhsihc74uNSiXrCUGq8tVSemKXbZw6Lami9kQpuzryULrKi7i7C_De6j1ieflkKmv_fvPCxNDxot9x08r95TEFB_j5K1wQF/) 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/AVvXsEiHcoBFel4o5HWSSMB2-kiywbRgHrI-BNZTQkzbcn4p2pFDpfuKPKLn7FYm-qIPJ5wGOblLVEdgFf-A9krOPEmcNmtf5JUEMrfq1wmFeehN_oW7FtThP5ZyOpsKudAXmgpfU633C5Vq1Ok0/) 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/AVvXsEheXLbdEPStJVmo3RcEuQtFQviwmgL_SIiUbvy6NEVJFtR-jercZlZeeK15UpNOLlyhMF_CzEWTSGluRWRAtjni2VgiCtz6r8aYgof_OBzHuaJgRuwYHp8vxIpCWQvaJcurRi4ZjDJMfGik/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6Hbk71wdTtWR486gsT4TCEx3yeI8Q9kShxVCiBGdKPfs9O1apnBDrcmkQS190v-3hmyXp-IHg8CaNl3vgK4V3bGvdV31TGKe3LOKGYbr6zxm2SxA0fG5utLAG6c2PQOureeq_kom5A11/) 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/AVvXsEheXLbdEPStJVmo3RcEuQtFQviwmgL_SIiUbvy6NEVJFtR-jercZlZeeK15UpNOLlyhMF_CzEWTSGluRWRAtjni2VgiCtz6r8aYgof_OBzHuaJgRuwYHp8vxIpCWQvaJcurRi4ZjDJMfGik/) 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/AVvXsEj9jnHpWMcTF9H_8XVybz7kPtLyjN74mRGIYOzK3vmbmItMhsU1AFPtNKBkpXjraOaScqzScjTifaq3FeXMgrMLZbRZCYO7BXffU4vN8AOczRVvzI9sFuDTNgdxuxO_Ci1A62Qqbp-xONq-/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_71HBAyvfw-owblKWLYl_dWxEHHVt6psCt1-mA5zYdRp5o-COGkqJt_WI-XB532yN501YVzTEu7YhMVNQEc6VgcAR9vInKWCfGwfFtcTwkqMzzub-2Z7R8m1g3etcCrm_OsVu7a3Hbk8/) 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/AVvXsEj9jnHpWMcTF9H_8XVybz7kPtLyjN74mRGIYOzK3vmbmItMhsU1AFPtNKBkpXjraOaScqzScjTifaq3FeXMgrMLZbRZCYO7BXffU4vN8AOczRVvzI9sFuDTNgdxuxO_Ci1A62Qqbp-xONq-/) 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.


Fuente:Ciudadblogger