jQuery Tooltip es una librería javascript que extiende las propiedades de jQuery y la cual nos permite agregar un tooltip a nuestra páginas web, esto con la posibilidad de personalizar el tooltip mediante CSS.
Para usar la librería primero debes descargar jquery.js y jquery.tooltip.js. Luego de ello lo siguiente es adjuntar estos archivos a nuestra página html.
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.tooltip.js" type="text/javascript"></script>
El siguiente paso es crear la hoja de estilos para el tooltip, esto lo hacemos de acuerdo al esquema de colores de nuestra web. Para ello debemos crear tres estilos #tooltip que define las propiedades de la caja del tooltip, #tooltip h3 que define el titulo del tooltip y #tooltip p que define el contenido del tooltip.
#tooltip {
background-color: #CCCCCC;
border: 1px solid #888888;
color: #333333;
padding: 4px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 7px;
}
#tooltip h3 {
font-size: 1.1em;
margin: 0;
padding: 0 3px;
text-align: left !important;
}
#tooltip p {
font-size: 0.95em;
margin: 5px 0 0 5px;
text-align: left;
}
El siguiente paso es modificar los parámetros de configuración del tooltip, para ello se tiene los siguientes parámetros:
- track: booleno que indica si el tooltip seguirá al mouse o se quedará estático.
- delay: tiempo en milisegundos antes que aparezca el tooltip.
- showURL: booleano que indica si se mostrará el url al final del contenido.
- showBody: caracteres que separa el titulo de contenido del tooltip.
Además de ello se tiene que definir a que tags se va aplicar el tooltip, por ejemplo si deseamos que todos los tags a, input e img tengan tooltip el código sería:
<script type="text/javascript">
$(function() {
// modify global settings
$.extend($.fn.Tooltip.defaults, {
track: true,
delay: 0,
showURL: false,
showBody: " - "
});
$('a, input, img').Tooltip();
});
</script>
El Tooltip mostrará como texto el contenido de la propiedad title del tag seleccionado, para separar el titulo del contenido se utiliza el carácter – que lo hemos definido en la propiedad showBody. Por ejemplo si tenemos un enlaze a Google y deseamos que muestre como titulo del tooltip «Google» y como contenido «http://www.google.com» el código sería.
<a href="http://www.google.com" title="Google - http://www.google.com">Google</a>
Finalmente uniendo todas estas piezas obtenemos el código final para nuestro ejemplo:
<html>
<head>
<title>jQuery Tooltip by unijimpe</title>
<style type="text/css">
body {
font-family: "Trebuchet MS", Verdana, Arial;
font-size: 12px;
color: #777777;
background-color: #F6FAFA;
}
#tooltip {
background-color: #CCCCCC;
border: 1px solid #888888;
color: #333333;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 7px;
max-width: 20em;
line-height: 12px;
}
#tooltip h3 {
font-size: 1.1em;
margin: 0;
padding: 0 3px;
text-align: left !important;
}
#tooltip p {
font-size: 0.95em;
margin: 5px 0 0 5px;
text-align: left;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// modify global settings
$.extend($.fn.Tooltip.defaults, {
track: true,
delay: 0,
showURL: false,
showBody: " - "
});
$('a, input, img').Tooltip();
});
</script>
</head>
<body>
<h3>jQuery Tooltip by unijimpe </h3>
<p>Esta es una prueba de jQuery Tooltip</p>
<ol>
<li><a href="http://www.google.com" title="Google - http://www.google.com">Google</a></li>
<li><a href="http://blog.unijimpe.net" title="unijimpe - http://blog.unijimpe.net">unijimpe</a> </li>
</ol>
</body>
</html>
Con lo cual obtenemos el siguiente resultado.
Finalmente y a pedido de nuestros visitantes les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan probarlo funcionando.
Comentarios Total 11 comentarios
Publicado: 16/12/2006 9:06 am
Existe otra libreria, que nos permite incluir imagenes en el tooltip y tambien nos da la facilidad de manejar los tooltips como archivos independientes pudiendo asi reutilizarlos.
JTip
Publicado: 16/12/2006 10:59 am
Si es cierto, ademas jTip es muy bueno en su momento hablare de ello, por lo demás vi tu blog y tienes un muy buen post sobre jTip, felicitaciones y gracias.
Publicado: 02/02/2007 9:41 pm
MUCHAS GRACIAS!!!
ME SIRVIÓ MUCHÍSIMO LA EXPLICACIÓN DEL JQUERY TOOLTIP.
DESDE SAN JOSÉ, COSTA RICA
MANUEL VÍQUEZ
Publicado: 25/07/2007 1:39 am
muy bueno… voy a usarlo en mi pagina pero con otro diseño… muchas gracias!!
Publicado: 29/11/2007 2:04 am
como lo puedo hacer para incluir una imagen en el tooltip, ademas del texto…Por mas que intento hacerlo no puedo…Me seria de gran ayuda una respuesta. gracias
Publicado: 16/08/2008 1:10 am
Me tomó 1 minuto implementarlo y 30 segundos personalizarlo… Muy cómodo y fácil de adaptar, lo recomiendo.
Gracias por el dato =)
Publicado: 27/09/2008 10:52 am
Gracias por el artículo unijimpe.
Lo he probado y es muy bueno, pero me gustaría saber si es posible insertar información externa en el tooltip, por ejemplo, desde XML.
Se que por medio de la función de jQuery «$get» o «$post» puedo leer un archivo XML o parte de él, de la siguiente forma.
$.get(«data.xml», function (xml) {
…
}
Lo que no se es como podría implementarlo con el tooltip.
Alguno de vosotros puede orientarme o darme alguna idea?
Muchas gracias
Publicado: 12/04/2009 7:42 pm
Hola,
a mi no me funciona y lo he hecho exactamente igual.
Es como si no se aplicase el diseño al tooltip. Alguien sabe a que se puede deber??
gracias!
Publicado: 20/05/2009 5:04 pm
hola Xim, el motivo que no funcione, es por que la version de jQuery que usa es muy antigua, creo que la 1.0, seguro la estas usando con la 1.3.2 que es la actual, dale por muerto a este plugin XD
Publicado: 01/06/2009 8:28 pm
[…] la misma librería JQuery que utiliza el tema K2, para no tener problemas, hasta que encontré esto, lo destripé, lo mejoré en el aspecto visual y lo llevé a plugin. El resultado está a la vista […]
Publicado: 24/09/2010 10:18 am
Mi duda es que deseo que en vez de que tome el title, tome otro cambo, y cuando le cambio el nombre, no me aparece el tooltip