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.