Cómo agregar tooltip decorado

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Tooltip decorado

Un tooltip es un cuadrito que aparece al poner el cursor sobre algún enlace. Normalmente el tooltip explica y nos informa sobre algo relacionado con el enlace.

Los tooltips son originalmente de un color amarillo-crema pero ahora podrás ponerlos del color que más te guste...


Para poner un tooltip en tu blog deberás agregar unos bloques en el CSS, de forma que podrás "tunear" tu cartelito.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega estas definiciones:

a.tooltip{
position: relative;
z-index: 24;
color: #707070;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #a3a3a3;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color: #707070;
}

a.tooltip:active{
z-index: 24;
color: #818283;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 1px solid #818283;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 14em;
background-color: #cfcfcf;
color: #707070;
font-size: 8pt;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Puedes cambiar el tooltip y decorarlo a tu gusto:

color: #707070; Esto es el color que tendrá el link.

color: #a3a3a3; Esto es el color que tendrá el link al pasar el cursor por encima.

color: #707070; Esto es el color que tendrá el link mientras hacemos clic.

border: 1px solid #818283; Determina el borde del tooltip. 1px es el grosor, solid el estilo (puedes ver los estilos de borde en esta entrada) y #818283 es el color.

background-color: #cfcfcf; Es el color de fondo que tiene el tooltip.

color: #707070; Es el color de la letra del tooltip.

font-size: 8pt; El tamaño del texto en el tooltip.

Una vez tuneado, guarda cambios.

Ahora, siempre que quieras insertar el enlace con el tooltip usa esta línea:

<a href="URL DE LA PAGINA" class="tooltip">TITULO DEL ENLACE<span>EL TEXTO DEL TOOLTIP</span></a>

Sustituye...

URL DE LA PAGINA por la dirección de la web o blog que quieres enlazar, por ejemplo: http://google.es/

TITULO DEL ENLACE por el título del enlace, por ejemplo Google.

EL TEXTO DEL TOOLTIP por el texto que aparecerá en el tooltip, por ejemplo clic aquí para ir a Google.

¡Y ya tendrás tu tooltip!