Main menu

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

Si quieres ver el plugin en acción, te hemos preparado una demo donde puedes comprobar los diferentes tipos de tooltips que puedes crear.

Ver demo Descargar ejemplo

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Linkedin

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más

ACEPTAR
Aviso de cookies