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 opativos 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 */ }

Ut tincidunt nisi quis elit dignissim mattis. Phasellus sit amet nunc eu est scelerisque tincidunt sit amet vitae sem. Sed ut nisi lorem. Vivamus ut felis libero. Vivamus venenatis justo ante. Nunc elementum interdum dolor, sit amet condimentum diam fermentum ac. Sed dictum condimentum arcu, id ornare turpis accumsan eu. Praesent ultricies egestas nulla at consectetur. Nunc sed est nulla, sit amet aliquam purus. Nam semper lacinia egestas. Nunc dictum lobortis arcu at bibendum?

Donec commodo nulla et magna malesuada a euismod metus aliquam. In hac habitasse platea dictumst. Vivamus mattis, nisi ac commodo cursus, metus justo eleifend sem, non auctor nisi felis eu tellus. Duis convallis condimentum elit, quis ullamcorper odio commodo ac. Aliquam ornare commodo fermentum. Aenean ut diam sed.

Aquí hay dos ejemplos más que cambian las propiedades de #tt, en uno, se usa una imagen de fondo eb lugar de un color plano y en la otra se establece el color de fondo como transparente.

demo 1 | demo 2 | reset