Mar 022014
 

Un tooltip es un pequeño texto que se puede asociar a determinados elementos de la página, ya sean enlaces, campos de un formulario, imágenes, etc… y que típicamente contiene una descripción del elemento, información adicional o consejos útiles sobre el mismo.

Un tooltip sólo se visualiza cuando el usuario coloca el cursor sobre el elemento  al que está asociado, y por ello constituye un recurso excelente para ofrecer al usuario información complementaria sobre el contenido de una página, sin recargar excesivamente el contenido visible.

En este artículos examinamos las distintas técnicas existentes para la incorporación de tooltips a una pagina web.

1. El tooltip por defecto implementado en los navegadores

La manera más básica de incorporar un tooltip es añadir un tag “title” al elemento al que se quiere asociar. Los distintos navegadores implementan distintas formas de visualizar el tooltip.

Por ejemplo, si utilizamos el siguiente código para añadir un tooltip a un elemento “<div>”:

Comprobamos que los principales navegadores presentan el tooltip de un modo muy parecido:

browser-tooltips

El problema que se presenta en este caso es que el diseñador no tiene control sobre el aspecto o la ubicación del tooltip. Por esta razón, se han desarrollado otros mecanismos de implementación de esta funcionalidad.

2. Tooltips con bootstrap y jQuery

La librería Bootstrap de Twitter ofrece una elegante solución para implementar tooltips que permite incorporar diseño a los mismos, y aumenta su funcionalidad.

Para implementar un tooltip con bootstrap, sustituimos el tag ‘title’ por los tags ‘rel=”tooltip”‘ y ‘data-original-title’. Así, la definición del elemento div del ejemplo anterior quedaría así:

Después, debemos añadir un código javascript para asignar la función “tooltip()” a los elementos marcados con ‘rel=”tooltip”‘:

Y naturalmente, en la cabecera de la página debemos cargar las librerías jQuery y bootstrap:

2.1 Controlando la ubicación del tooltip

Para determinar en dónde va a presentarse el tooltip, podemos utilizar el tag ‘data-placement=”POSICION”‘, en donde POSICION puede ser left, right, top o bottom.

2.2 Presentando el tooltip cuando un campo de formulario está seleccionado

Por defecto, el tooltip se presenta cuando se coloca el cursor sobre el elemento en el cual está definido.

En algunos casos, puede ser preferible presentarlo cuando el elemento, por ejemplo un campo de un formulario, está seleccionado.

Para ello, basta con utilizar el tag ‘data-trigger=”focus”‘

 Publicado por en 8:07 pm

 Deja un comentario

(requerido)

(requerido)