Originales efectos tooltip con jQuery html5tooltips

Tal y como dice la Wikipedia, un tooltip es una herramienta de ayuda visual que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra. Esto es precisamente lo que hace el plugin jQuery html5tooltips, pudiendo modificar el diseño y el efecto del mismo.

Con html5tooltips podremos indicar qué efecto queremos que tenga el tooltip y personalizar su color (hay más de 40 colores predefinidos). Tal y como veremos a continuación, podemos usarlo de diversos modos, por lo que tendremos flexibilidad a la hora de configurarlo.

Qué necesitamos

Biblioteca jQuery
Fichero JavaScript html5tooltips.js
Ficheros CSS html5tooltips.css y html5tooltips.animation.css

Descargar archivos del plugin jQuery html5tooltips.

Preparando el terreno

Deberemos hacer la llamada a la biblioteca jQuery, a nuestro fichero de funciones (en nuestro caso functions.js) y a los ficheros CSS y JS del plugin. El código resultante deberá ser algo así:

<!-- html5tooltips Styles & animations -->
<link href="css/html5tooltips.css" rel="stylesheet">
<link href="css/html5tooltips.animation.css" rel="stylesheet">

<!-- Custom functions file -->
<script src="js/functions.js"></script>

<!-- html5tooltips script -->
<script src="js/html5tooltips.js"></script>

Uso directo con HTML

El modo más sencillo de configurar el plugin es añadiendo los atributos data-* en la propia etiqueta HTML del elemento que contendrá el tooltip. De este modo, no nos tenemos que preocupar de hacer la llamada al plugin ni nada, todo es automático. Por ejemplo:

<span data-tooltip="texto del tooltip"></span>

Con la posibilidad de añadir más atributos, por ejemplo:

<span data-tooltip="texto del tooltip" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin"></span>

Parámetros de configuración HTML

data-tooltip: texto que contendrá el tooltip
data-tooltip-animate-function: valor de la animación del tooltip (fadein, foldin, foldout, roll, scalein, slidein, spin)
data-tooltip-color: valor del color de fondo de la caja de tooltip
data-tooltip-more: valor del texto ampliado que ha de tener el tooltip al hacer clic en el elemento
data-tooltip-stickto: posición del tooltip (bottom, left, right, top)
data-tooltip-maxwidth: anchura máxima que tendrá la caja de tooltip

Uso con llamada JavaScript

Si queremos más posibilidades de configuración podemos hacer la llamada al plugin desde nuestro fichero personalizado de funciones. Por ejemplo:

html5tooltips({
 animateFunction: "spin",
 color: "bamboo",
 contentText: "Texto del tooltip",
 stickTo: "right",
 targetSelector: "#id_tag_tooltip"
});

Este código tendrá efecto sobre el elemento HTML con el id “id_tag_tooltip”. Si queremos añadir otro tooltip, añadiremos debajo otro bloque de código, por ejemplo:

html5tooltips([
 {
 animateFunction: "spin",
 color: "bamboo",
 contentText: "Texto del tooltip",
 stickTo: "right",
 targetSelector: "#id_tag_tooltip"
 },
 {
 contentText: "Texto del tooltip",
 contentMore: "Texto de ampliación para el tooltip",
 stickTo: "left",
 maxWidth: "180px",
 targetSelector: "#identificador"
 }
]);

Parámetros de configuración JavaScript

AnimateFunction: efecto de animación del tooltip (fadein, foldin, foldout, roll, scalein, slidein, spin)
color: color CSS (como #000 o #DEDEDE) o bien uno de los colores predefinidos que tiene el plugin (daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper)
contentText: texto para el tooltip, con la posibilidad de añadir HTML
contentMore: texto ampliado para el tooltip, se muestra al hacer clic en el elemento. También tiene la posibilidad de añadir HTML
disableAnimation: para desactivar el efecto de animación. Admite los valores true o false
stickTo: posición donde situar el tooltip; bottom, left, right, top
stickDistance: número de pixels que representan la distancia entre el tooltip y el elemento HTML
targetSelector: identificador CSS usado para que el plugin sepa a qué elemento debe ponerle el tooltip
targetXPath: si no usamos directamente un identificador, podemos usar un selector CSS para añadir el tooltip. Por ejemplo, para que tenga efecto en todos los elementos <a> dentro de la clase “tooltip”, podemos poner “.tooltip a”
maxWidth: valor máximo de anchura que puede tener la caja del tooltip