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ás informació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ás informació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.
