Tooltips con efecto fade

Fading JavaScript Tooltips es un pequeño script que permite crear esos pequeños cuadros de textos informativos que se ven cuando colocamos el puntero del ratón sobre un enlace (tooltips). Su característica principal es que es muy lviana y no depende de otras librerías así que puede usarse en cualquier página web.

Una vez que descargamos el ZIP veremos una serie de archivos incluyendo el demo. De todos ellos, el único necesario es script.js que podemos alojar en un servidor o bien agregarlo de manera directa en la plantilla con una única condición, DEBE estar al final de nuestra página así que lo colocamos antes de </body>:

<script type='text/javascript' src='URL_script.js'></script>

o bien:

<script type='text/javascript'>
//<![CDATA[
aqui copiamos y pegamos el contenido del archivo
//]]>
</script>

¿Cómo lo vamos a usar? Indicando los textos que queremos que sirvan como "lanzadores" mediante etiquetas SPAN:

<span class="hotspot" onmouseover="tooltip.show('lo que queremos mostrar');" onmouseout="tooltip.hide();"> un texto </span>

Es decir, colocamos en tooltip.show() una cadena de texto de cualquier tipo que, puede incluir código HTML aunque para esto, deberemos cambiar los caracteres prohibidos:

en lugar de < escribimos &lt;
en lugar de > escribimos &gt;

por ejemplo:

<span class="hotspot" onmouseover="tooltip.show('Blablabla &lt;b&gt;negrita&lt;/b&gt; blablaba');" onmouseout="tooltip.hide();"> un texto </span>

y no sólo es texto lo que puede colocarse, también s posible usar una imagen; por ejemplo:

<span class="hotspot" onmouseover="tooltip.show('&lt;img src=\'URL_imagen\'/&gt;');" onmouseout="tooltip.hide();"> un texto </span>

Para este tipo de cosas, donde el HTML a colocar es complejo, sólo debemos prestar atención a las comillas e indicarle al navegador que ciertos caracteres deben tomarse de manera literal, para eso, les anteponemos una barra invertida:

'<img src=\'URL_imagen\'/>'

Las comillas de incio y fin son parte del código y las internas son literales.

Lo que faltaría agregar es el CSS que es fundamental para que esto funcione. Lo agregamos antes de </b:skin>. Aunque hay un archivo llamado style.css en el demo que puede usarse de base, podemos cambiarlo. Por ejemplo, en el demo, se usan tres imágenes para darle forma redondeada al tooltip (tt_left.gif, tt_top.gif, tt_bottom.gif) si quieren usarse, deben ser alojadas en algún sitio y cambiar las URLs.

En estos ejemplos no estoy usando imágenes así que el estilo se reduce a dos definiciones:

.hotspot { /* es el texto que sirve de lanzador */
color: #94D5FD;
cursor: pointer;
font-weight: bold;
font-family: tahoma;
font-size: 13px;
}

#tt { /* es el contenido del tooltip y el único obligatorio */
background: CornflowerBlue;
color: #FFF;
display: block;
font-family: Arial;
font-size: 16px;
padding: 5px 10px;
position: absolute;
-moz-border-radius: 10px;
}

/* los otros tres bloques son optativos y tiene sentido usarlos sólo si le colocamos un fondo con imágenes */
#tttop { /* la parte superior */ }
#ttcont { /* la parte central */ }
#ttbot { /* la parte inferior */ }