Hace unos días descubrí vía XYBernéticos: The Ultimate jQuery List. Hasta hoy, no había tenido tiempo de visitarlo, revisando el contenido de dicho sitio, encontré un excelente script para implementar tooltips.

jtip-demo

Se trata de jTip un recurso para implementar muy fácilmente con jQuery, tooltips como el de la imagen.

Implementación

Primero hay que enlazar los archivos JS:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jtip.js" type="text/javascript"></script>

Si el elemento donde se va a mostrar el tooltip es un enlace:

<a href="ajax.htm?width=375" class="jTip" id="one" name="Texto en la parte superior del Tooltip">?</a>

En donde:

ajax.htm?width=375 es el archivo que contiene el contenido del tooltip que es simplemente un archivo HTM con HTML.

width=375 es el ancho del tooltip en píxeles, si no se escribe nada el ancho por defecto es de 250 píxeles.

Básicamente esto es lo básico que tienes que saber para implementar jTip.

jTip:

Web/descargar: codylindley.com/Javascript/264/jtip-a-jquery-tool-tip

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT