Colocar un Gif como Tooltip

2 minuto(s)

En esta página:

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 Toolgif:

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


// Instancia el archivo "toolgif.js", no necesitas jQuery
<script type="text/javascript" src="js/toolgif.js"></script>

// Instancia el archivo "toolgif.js", no necesitas jQuery

Creamos el elemento HTML

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


<p>
  Cuando juegas y estas aburrido sueles hacer <span class="toolgif" data-toolgif-url="img/1.gif">esto</span> y mas cosillas.
</p>

<p>

Cuando juegas y estas aburrido sueles hacer <span class="toolgif" data-toolgif-url="img/1.gif">esto</span> y mas cosillas.

</p>

Configuramos nuestra función JavaScript

La función la creamos después de instanciar el archivo toolgif.js

Acá defino el ancho, alto, borde y la dirección a donde quiero que se muestre el gif. La colocamos antes de cerrar la etiqueta </body> de nuestra pagina html:


    <script type="text/javascript" src="js/toolgif.js"></script>

    <script type="text/javascript">

      new Toolgif(".toolgif",{
        width:200,
        height:170,
        borderRadius: 5,
        placement: "top"
      }).toolgif();

    </script>

  </body>
</html>