Tooltip para nuestro blog

El Tooltip es el cuadradito que aparece cuando ponemos el cursor encima de un enlace.

Pasa el cursor aquíEste es el mensaje que se mostrará al pasar el cursor.

Este cuadradito vale para explicarnos algo relacionado con el enlace.

 

 Modificando nuestra plantilla

Para poder hacer que el Tooltip funcione en nuestro blog, tenemos que modificar nuestra plantilla.

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

Nos vamos a Tema > HTML 
Busca la etiqueta  ]]></b:skin> y añade este bloque encima:

Código

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;

}

Decorarlo a nuestro gusto

Enlace

<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>