Colocar un Gif como Tooltip

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

Usare la clase 'toolgif ' a la cual le aplicaremos el efecto Gif Tooltip:

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.