Tooltip con imagen

Ya os expliqué en uno de mis primeros post como añadir un tooltip a los links.
En esta ocasión explicaré como podemos conseguir un tooltip un poco más llamativo y original.
Supongo que ya sabéis que un tooltip es una ventanita emergente, habitualmente con un cuadro explicativo en su interior, en este no solo podremos añadir texto, además vamos a incluirle una imagen.

Pon el puntero sobre el link para ver como funciona:

El Escaparate
Ayuda para tu blog
Nuevo Blogger


Como en otras ocasiones vamos a ayudarnos del CSS:

1- En primer lugar vamos a nuestra plantilla y añadimos este código dentro del CSS, para los que tengais alguna duda, podemos colocarlo justo antes de ]]></b:skin> que es donde termina la parte del CSS de la plantilla.


a.tooltip {
position:relative;
color:#000;
text-decoration:none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:110px;
border:2px solid #000000;
background-color:#CC3333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
color:#ffffff;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
}

2- Cada vez que añadamos un link en el que queramos usar el tooltip, hemos de incluirlo en este código de HTML.

<a href="URL DEL ENLACE" class="tooltip">TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN">TEXTO QUE VA DENTRO DEL TOOLTIP</span></a>

Si vamos a usarlo en los enlaces que añadamos en alguna de nuestras entradas, podemos pegarlo en opciones de la plantilla - formato - plantilla de entrada y así tenerlo "a mano"

Modificaciones

Podemos cambiar:
El ancho de la ventana del tooltip: width:110px;
El color, grosor y vista del borde: border:1px solid #000000;
El color de fondo de la ventana del tooltip: background-color:#CC3333;
El color del texto: color:#ffffff;
La alineación del texto: text-align: left;
El tamaño de la fuente del texto: font-size: 12px;
La distancia del texto al borde de la ventana del tooltip: padding: 5px;
Estas dos líneas hacen que el borde de la ventana del tooltip se vea redondeado en
Firefox, en IE se verán normal, es decir, cuadrados: -moz-border-radius: 15px;
-webkit-border-radius: 15px;