Los tooltips son pequeños recuadros de información que aparecen al posicionar el ratón sobre un elemento. Normalmente se utilizan para ofrecer información adicional sobre el elemento seleccionado o para mostrar al usuario pequeños mensajes de ayuda. Los tooltips son habituales en varios elementos de los sistemas operativos:
Figura 8.7 Aspecto de un tooltip típico en el Sistema Operativo
Realizar un tooltip completo mediante JavaScript es una tarea muy compleja, sobre todo por la dificultad de mostrar el mensaje correctamente en función de la posición del ratón. Afortunadamente, existen scripts que ya están preparados para generar cualquier tipo de tooltip. La librería que se va a utilizar se denomina overLIB, y se puede descargar desde su página web principal: http://www.bosrup.com/web/overlib/
La descarga incluye todos los scripts necesarios para el funcionamiento del sistema de tooltips, pero no su documentación, que se puede consultar en: http://www.bosrup.com/web/overlib/?Documentation. La referencia de todos los comandos disponibles se puede consultar en: http://www.bosrup.com/web/overlib/?Command_Reference
A continuación se indican los pasos necesarios para incluir un tooltip básico en cualquier página web:
1) Enlazar los archivos JavaScript requeridos:
<script type="text/javascript" src="js/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>Se descomprime el archivo descargado, se guarda el archivo JavaScript en el sitio adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/) y se enlaza directamente desde la cabecera de la página HTML. Los tooltips sólo requieren que se enlace un único archivo JavaScript (overlib.js). El comentario que incluye el código XHTML es el aviso de copyright de la librería, que es obligatorio incluirlo para poder usarla.
2) Definir el texto que activa el tooltip y su contenido:
<p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis vehicula nonummy orci.</p>Los tooltip se incluyen como enlaces de tipo <a> para los que se definen los eventos onmouseover y onmouseout. Cuando el ratón se pasa por encima del enlace anterior, se muestra el tooltip con el aspecto por defecto:
Figura 8.8 Aspecto por defecto del tooltip creado con la librería overLIB
La librería overLIB permite configurar completamente el aspecto y comportamiento de cada tooltip. Las opciones se indican en cada tooltip y se incluyen como parámetros al final de la llamada a la función overlib():
<a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.', CENTER);" onmouseout="return nd();">consectetuer adipiscing elit</a>El parámetro CENTER indica que el tooltip se debe mostrar centrado respecto de la posición del ratón:
Figura 8.9 Centrando el tooltip respecto de la posición del ratón
Otra opción que se puede controlar es la anchura del tooltip. Por defecto, su anchura es de 200px, pero la opción WIDTH permite modificarla:
<a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.', CENTER, WIDTH, 120);" onmouseout="return nd();">consectetuer adipiscing elit</a>El valor de la nueva anchura se indica en el parámetro que va detrás de WIDTH. El nuevo aspecto del tooltip es el siguiente:
Figura 8.10 Definiendo la anchura que muestra el tooltip
El uso de los parámetros de configuración en la propia llamada a la función que muestra los tooltips no es recomendable cuando el número de parámetros empieza a ser muy numeroso. Afortunadamente, overLIB permite realizar una única configuración que se utilizará para todos los tooltips de la página.
La configuración global consiste en llamar a la función overlib_pagedefaults() con todos los parámetros de configuración deseados. Por tanto, el código JavaScript necesario para realizar los cambios configurados hasta el momento sería:
<script type="text/javascript" src="js/overlib.js"></script>
<script type="text/javascript">
overlib_pagedefaults(CENTER, WIDTH, 120);
</script>
<p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis vehicula nonummy orci.</p>Utilizando esta configuración global, se va a modificar por último el aspecto del tooltip para hacerlo más parecido a los tooltips de los sistemas operativos:
Figura 8.11 Tooltip creado con la librería overLIB y personalizado para que parezca un tooltip de Sistema Operativo
En el ejemplo anterior se ha modificado el tamaño y tipo de letra y el color de fondo del tooltip mediante la siguiente configuración:
overlib_pagedefaults(WIDTH,150,FGCOLOR,'#ffffcc',BGCOLOR,'#666666',TEXTFONT,"Arial, Helvetica, Verdana",TEXTSIZE,".8em");Ejercicio 19
Mejorar el tooltip propuesto añadiendo las siguientes características:
- Que el tooltip no se muestre instantáneamente, sino que transcurra un cuarto de segundo hasta que se muestre (pista:
DELAY) - Que exista una separación horizontal de 15 píxel entre el puntero del ratón y el tooltip (pista:
OFFSETX) - Que el tooltip se muestre en la parte superior del puntero del ratón y no en la parte inferior (pista:
ABOVE)
El nuevo aspecto del tooltip se muestra en la siguiente imagen:
Figura 8.12 Nuevo aspecto del tooltip