Federico Alemany
Sencillo tooltip con js puro
Escrito por Federico Alemany - 14 de febrero de 2016
Hace unos días leí un articulo acerca de Javascript y el uso de librerías. Se mostraban comparaciones acerca del ahorro de tiempo que nos ofrecían algunas librerías al momento de codificar tareas básicas y/o rutinarias, entre ellas nombraba al uso de los ya conocidos "tooltips".
Un tooltip, para aquellos que no conocen, es un pequeño "cartelito" que aparece en pantalla al pasar el ratón sobre un elemento, generalmente indicando algún tipo de ayuda o información adicional acerca de dicho elemento. Aquí algunos ejemplos:



Sinceramente, siempre me he servido de alguna librería para hacerlos, pero ante la supuesta dificultad y/o tiempo que demandaría codificarlo por uno mismo, me eché a la tarea de intentarlo. El resultado de esto, fue este sencillo, pero practico script que nos permite asignar un tooltip a cualquier elemento de nuestro sitio, con el solo hecho de agregarle la clase 'tooltip' y un atributo "tooltip" (con el valor que queremos que se muestre en pantalla).

Como funciona básicamente este script? Bastante sencillo... busca en cada elemento de nuestro sitio aquellos elementos que posean la clase 'tooltip', y para aquellos, se agrega un manejador de eventos para que, cuando el mouse pasa por encima de dicho elemento, se muestre el tooltip en pantalla (el valor del atributo 'tooltip' asignado al elemento). Para finalizar, se lo hace desaparecer cuando el mouse sale del elemento.

Como se puede notar en el ejemplo, el código del script se encarga de todo, solo debemos buscar un elemento de nuestro sitio y agregarle el atributo y la clase "tooltip". A este atributo le vamos a dar como valor, el texto que queremos que se muestre en pantalla cuando el tooltip sea mostrado. Por ejemplo, si quisieramos asignar un tooltip a un enlace, solo debemos hacer lo siguiente:
<a href='#' class='tooltip' tooltip='Esto es un enlace'>Enlace</a>

Echemos un vistazo al código!

Descargar el código


Ver el ejemplo en funcionamiento!

Obviamente los estilos se pueden modificar para hacerlos mas agradables. En el ejemplo, se aplicaron dos o tres estilos css básicos para dar un mínimo formato a los tooltips.

Descargar el código

Comentarios:

Nombre:
Comentario: