7.3 Tooltip

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.

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: https://github.com/overlib/overlib

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 eventosonmouseover y onmouseout. Cuando el ratón se pasa por encima del enlace anterior, se muestra el tooltip con el aspecto por defecto:

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:

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 uso de los parámetros de configuración en la propia llamada a la función que muestra lostooltips 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 lostooltips 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"><!-- overLIB (c) Erik Bosrup --></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:

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 60

Mejorar el tooltip propuesto añadiendo las siguientes características:

1. Que el tooltip no se muestre instantáneamente, sino que transcurra un cuarto de segundo hasta que se muestre (pista: DELAY)
2. Que exista una separación horizontal de 15 píxel entre el puntero del ratón y el tooltip (pista:OFFSETX)
3. Que el tooltip se muestre en la parte superior del puntero del ratón y no en la parte inferior (pista: ABOVE)