Tooltips con imagen

¡OJO!: ESTA TOOLTIP TRABAJA EN IE7 y FIREFOX:

Creo que ya he comentado en alguna ocasión, acerca de estos "títulos" que salen en algunas expresiones de nuestros blogs, cuando pasamos el ratón por encima.
Algunos blogroll las utilizan también para mostrar, junto al link, una imagen de la web que recomiendan (queda muy guapo, pero pesa mucho... sobre todo si hay muchos links en el blogroll). Ahora, vamos a hacer una
prueba:
Como véis, al pasar el ratón sobre "prueba", sale un muñequín. Lo mismo podéis hacer especto de un link y su imagen o respecto de un texto cualquiera (insertando en la tooltip una palabra o una imagen, como queráis).
Las claves para que funcione tan estupendamente, las tiene Vagabundia, así:

1º.- Insertar el CSS de la tooltip en la edición de plantilla:

a.Ntooltip {
position: relative;
text-decoration: none !important;
color:#0080C0 !important;
font-weight:bold !important;
}

a.Ntooltip:hover {
z-index:999;
background-color:#000000;
}

a.Ntooltip span {
display: none;
}

a.Ntooltip:hover span {
display: block;
position: absolute;
top:2em; left:2em;
width:250px;
padding:5px;
background-color: #0080C0;
color: #FFFFFF;
}

("Ntooltip" es la denominación que jmiur le ha dado a la herramienta, para diferenciarla de otras posibles en la plantilla. Podéis cambiar todas las definiciones de colores, p.e.)

2º.- Insertad la siguiente tag donde queráis que aparezca vuestra tooltip:

<a class=Ntooltip href="">prueba:( o un link)<span> <img src="URLIMAGEN" alt="TÍTULO"> </span></a>

(He utilizado la función "alt": en otro caso, la tooltip no me funcionaba)

Como véis, es una especie de "lightbox". Solo que más ligera y con muchas posibilidades.

--------------------------------------

TOOLTIP CON TEXTO E IMAGEN:

Podéis ver un ejemplo en mi blog Revolutum (En la sidebar derecha, ver "TooltEpílogo"). Aquí no voy insertarla porque he cambiado el css de la Nooltip en esa plantilla (y no voy a poner dos diseños de Nooltip en esta) y, además. mi plantilla en Revolutum es de fondo negro y lleva una fuerte opacidad, con lo cual, se ve allí mejor que en esta plantilla. de fondo blanco.
Como digo, allí he cambiado el fondo, el peso y la posición de la Nooltip (cambiad "top" por "bottom" y, en su caso, "right" por "left") , de manera que he dejado así el CSS:

a.Ntooltip {
position: relative;
text-decoration: none !important;
color:#0080C0 !important;
font-weight:bold !important;
}

a.Ntooltip:hover {
z-index:999;
background-color:#000000;
}

a.Ntooltip span {
display: none;
}

a.Ntooltip:hover span {
display: block;
position: absolute;
bottom:2em; left:2em;
width:250px;
height=257px;
padding:6px;
border:3px double firebrick;
background-color:#000;
color: white;
}

y el HTML:

<a class="Ntooltip" href="http://cafe-junio.blogspot.com/">Epílogo<image src="http://s.themes.wordpress.net/testrun/wp-content/themes/3511/images/tel.gif" ; title="Epílogo"/><span>    <img src="http://s.themes.wordpress.net/testrun/wp-content/themes/3511/images/umbrella.jpg" title="Principal"/>Epílogo es el origen de todo ésto... </span></image></a>

Esta Tooltip también funciona en IE7 y Firefox