Tooltips con qTip2

Hay veces que necesitamos que cierto texto o imagen muestre un texto descriptivo cuando pasamos el mouse por encima, aunque esto puede ser realizado a “mano”, hay disponibles en la internet muchas herramientas poderosas y compatibles con múltiples navegadores como para ponerse a realizar la uno mismo, especialmente cuando es probable que nos lleve mucho más rato y no obtengamos mejores resultados.

Este es el caso de qTip2 un avanzado Tooltip realizado como plugin del poderoso framework de javascript JQuery. qTIp2 es sencillo de utilizar y nos permite personalizar su apariencia editando el archivo CSS que incluye en sus ficheros, también podremos cambiar ciertos parámetros al  cargar el tooltip, por ejemplo la posición, el color y el contenido entre otras opciones más avanzadas, abajo se puede ver el código necesario para hacer que cierto elemento muestre el tooltip al pasar el mouse por encima.

1
2
3
4
5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<html><link rel="stylesheet" type="text/css" href="estilos/jquery.qtip.min.css" media="screen">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<html><link rel="stylesheet" type="text/css" href="estilos/jquery.qtip.min.css" media="screen">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.qtip.min.js"></script>
<script>
$(document).ready(function(){
$("#caja").qtip({
 content: {
 text: 'Los tooltips son necesarios para brindarle m&aacute;s informaci&oacute;n al usuario' , 
 title: {
 text: 'Tooltip de Prueba',
 button: true
 }
 },
 position:{
 my:"bottom middle",
 at:"top middle" 
 }
 });
});
</script>
<script src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.qtip.min.js"></script>
<script>
$(document).ready(function(){
$("#caja").qtip({
 content: {
 text: 'Los tooltips son necesarios para brindarle m&aacute;s informaci&oacute;n al usuario' , 
 title: {
 text: 'Tooltip de Prueba',
 button: true
 }
 },
 position:{
 my:"bottom middle",
 at:"top middle" 
 }
 });
});
</script>
1
2
3
4
5
6
7
<title></title>
</head>
<body>
<div id='caja' style='width:50px;height:50px;background-color:#999;margin:0 auto;margin-top:100px;'>
</div>
</body>
</html>
<title></title>
</head>
<body>
<div id='caja' style='width:50px;height:50px;background-color:#999;margin:0 auto;margin-top:100px;'>
</div>
</body>
</html>

Lo primero que hay que hacer para que el tooltip funcione es incluir tres archivos en la sección <head>, primero el archivo CSS jquery.qtip.min.css luego el framework JQuery y por ultimo el propio plugin  jquery.qtip.min.js. Una vez incluidos estos tres archivos ya podremos llamar al objeto que crea el tooltip con los parámetros que deseemos. En este caso el tooltip aparece sobre el elemento que tiene el ID Caja, también podemos hacerlo aparecer en el elementos con una determinada clase (ejemplo $(“.cajas”) ) o incluso si quisiéramos que aparecieran en un hipervínculo podríamos hacerlo con el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
 // Match all <A/> links with a title tag and use it as the content (default).
 $("a[title]").qtip({
 position:{
 my:"bottom middle",
 at:"top middle" 
 }, 
 style: {
 classes: "ui-tooltip-shadow ui-tooltip-green"
 }
 });
 });
 </script>
$(document).ready(function(){
 // Match all <A/> links with a title tag and use it as the content (default).
 $("a[title]").qtip({
 position:{
 my:"bottom middle",
 at:"top middle" 
 }, 
 style: {
 classes: "ui-tooltip-shadow ui-tooltip-green"
 }
 });
 });
 </script>

Donde el texto que aparecería en el tooltip estaría determinado por title del mismo vínculo, una solución ideal cuando queremos poner varios tooltips con textos diferentes y no queremos complicarnos la vida. Para todos aquellos que quieran utilizar este excelente plugin les dejo la página oficial donde ademas de poderlo descargar encontraran varias demos que muestran las posibilidades de qTip2.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

2 comentarios en “Tooltips con qTip2

  1. Hola disculpa me podrías decir como puedo agregar el qtip2 en mi pagina pero que el contenido del tooltip muestre una consulta con php sobre una imagen?
    La verdad es que soy muy inexperta haciendo paginas web y este es un proyecto para graduarme y me seria de gran ayuda si me puedes contestar.
    Gracias.

    1. Hola Anahí, lamentablemente caresco de tiempo para ponerme a ver como se hace, personalemnte no he utilizado un qtip2 para hacer un popup de imágenes, a lo mejor te coviene hacerlo a mano con html, css, js y php para el backend. La única ayuda que te puedo dar son las guias y demos que ofrece qtip, ahí hay un ejemplo usando Ajax para cargar el contenido que te puede ser útil, o en todo caso uno utilizando un iframe, que si bien es medio aticuado (el método), te puede ayudar a salir del paso:
      http://qtip2.com/guides/
      http://qtip2.com/demos

Deja un comentario