Colocar un Gif como Tooltip

Tutoriales

Demo Github

Cuando  creamos una página o un proyecto web a veces le agregamos Tooltips para ayudar al usuario a entender mejor de lo que estamos hablando en concreto. Normalmente hemos visto los típicos Tooltips en donde colocamos el puntero del mouse y nos aparece un texto de ayuda. Pero podemos darle más vida mediante la librería Toolgif y mejorar la interactividad del usuario con nuestra aplicación web mejorando la experiencia del usuario u obtener un buen Feedback. En este tutorial les voy a enseñar a como colocar un Gif como Tooltip en unos sencillos pasos.

Instanciamos jQuery y Toolgif:

Los colocamos antes de cerrar la etiqueta </head>:

Creamos el elemento HTML

Añado la clase ‘toolgif ‘ a mi elemento <span></span> y mediante el atributo data-url llamo al gif animado que esta almacenado en un carpeta llamada img

Configuramos nuestra función jQuery

Acá defino el ancho, alto, borde, etc. La colocamos antes de cerrar la etiqueta </body> de nuestra pagina html:

Eso es todo, espero que te sea muy útil. Ahora le puedes dar mas vida a tus contenidos y proyectos webs.

Gracias por tu atención.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required