Colocar un Gif como Tooltip

2 minuto(s)

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>

new Toolgif(".toolgif",{

width:200,

height:170,

borderRadius: 5,

placement: "top"

}).toolgif();

</script>

</body>

</html>

Si vamos al navegador, podemos ver que al colocar el puntero sobre el texto determinado, aparece el Gif como Tooltip:

Demo de un Gif como Tooltip — Procura usa Gifs con poco peso

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.

Tutoriales
10-10-2016
02-10-2023
Crear un Post - Eventos Devs - Foro

Colocar un Gif como Tooltip

Demo Github

Instanciamos Toolgif:

Creamos el elemento HTML

Configuramos nuestra función JavaScript

Todas Nuestras Páginas y Categorías:

Partners