JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

YACSSTooltip: un plugin gratuito y Open Source para crear tooltips de imágenes con jQuery

Si eres seguidor habitual de este blog, habrás notado que desde hace unos días las imágenes muestran la información de una manera más clara, en concreto utilizando un "tooltip" o capa de información que persigue al cursor y que muestra el texto asociada a la misma de una forma visible. Por ejemplo:

En este caso es una animación, pero entra en cualquier otro post reciente y la verás en acción en tu navegador de escritorio.

Este tooltip es una capa especial creada con JavaScript y CSS y para que funcione así he creado un plugin para jQuery que funciona con cualquiera de sus versiones y que permite generar ese tooltip para cualquier elemento que disponga de un atributo title o alt, pero que está pensado fundamentalmente para imágenes.

Este tooltip persigue al cursor mientras esté encima del elemento, se adapta a un ancho máximo para que no se generen líneas excesivamente largas y tiene en cuenta los límites de la página para no salirse ni por encima ni por debajo y que por lo tanto no se fuerce la aparición de barras de desplazamiento. En la animación anterior ves que cuando se acerca al borde derecho o al de abajo, el tooltip modifica su posición relativa respecto al cursor.

Para el texto que se muestra en el tooltip utiliza el texto del atributo title de la imagen o elemento en caso de estar presente, sino utiliza el valor del atributo alt. Si no tienes establecido ninguno  de los dos, entonces no actúa. Solo añade texto plano y no HTML (esto no es un festival: es un componente funcional), así que tenlo claro.

Por defecto, las imágenes en HTML muestran un tooltip nativo (el típico horrible de color amarillo en Windows) para lo que hayamos establecido en el atributo title, que además no se mueve del sitio, pareciendo en donde hayas puesto el cursor, por ejemplo así:

Para evitar que salga "esto" al mismo tiempo que el tooltip que genera este plugin lo que hace es deshabilitarlo y volver a restablecerlo cuando se saca el cursor de encima de la imagen/elemento.

Uso del plugin

Vete al repositorio de Github en el que lo he albergado y descarga la última versión del plugin. La puedes encontrar en la zona de "releases" del repositorio. Dentro del ZIP encontrarás un archivo .min.js que es la versión del plugin minimizada y lista para usar en producción. Pesa tan solo 833 bytes si el servidor la comprime con GZIP (lo más habitual al servirla).

También lo puedes utilizar directamente desde npm, con npm i jquery.yacsstooltip

Para utilizarla en tu página, añádela en cualquier parte del código después de haber añadido a jQuery, claro:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.YACSSTooltip.min.js"></script>

Ahora lo único que tienes que hacer es seleccionar con jQuery los elementos a los que quieres aplicar el tooltip llamando al método addTooltip(). Por ejemplo, si lo haces cuando la página esté lista, usando para ello el método $ de jQuery en su variante que recibe una función (si no sabes de qué te hablo ya estás tardando en aprender en serio JavaScript y jQuery), sería:

$(function() {
$('.article img').addTooltip();
});

Lo que hace este fragmento es, tras haberse cargado la página, localiza todos los elementos de imagen dentro de los elementos con la clase .article y les aplica el tooltip.

¡Listo!

Por supuesto, este plugin juega con las reglas de jQuery por lo que puedes seguir encadenando llamadas a métodos para hacer más cosas con el conjunto de elementos seleccionados tras haberles aplicado el tooltip. Por ejemplo:

$(function() {
$('.article img').addTooltip().css('border', '5px solid red');
});

En este caso, además, le ponemos un borde gordo de color rojo a todas esas imágenes.

Modificar el aspecto por defecto

Para generar estos tooltip, independientemente del número de imágenes/elementos sobre los que actúe, se utiliza un único elemento HTML subyacente que el plugin añade a la página. Es decir da igual que haya 1.000 imágenes en tu web o app que van a mostrar este tipo de tooltip: solo se usa un elemento, por lo que no se carga la página. Además se le asigna un identificador aleatorio que evita que pueda colisionar con cualquier otro elemento que tengas en la página.

El aspecto por defecto del tooltip es el que se muestra en la imagen anterior, al principio del artículo, pero si necesitas cambiarle ligeramente el aspecto lo único que tienes que hacer es añadir una definición de clase al CSS de tu página, con el nombre .YACSSTooltip. Cualquier propiedad que pongas ahí tendrá efecto sobre el tooltip, aunque seguramente tendrás que utilizar el modificador !important para asegurarte de que actúa sobre el mismo y que no hay conflictos con otros estilos más específico que pudieras tener en tu página.

Por ejemplo, si quieres que el tooltip tenga los bordes planos y no redondeados como se ven por defecto, puedes añadir este selector:

.YACSSTooltip {
border-radius: 0;
}

Como ves es extremadamente sencillo de usar junto con jQuery.

Dentro de unos días os hablaré sobre otro plugin más complejo que he creado y que he añadido también a este blog: el que te permite hacer zoom y pan sobre las imágenes que no caben en el espacio disponible, incluso desde móviles.

Hasta entonces... ¡espero que este plugin te resulte útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Agregar comentario