jQuery Tooltip

  • 25/11/2006
  • 12:21 am
  • unijimpe

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.

HTML:
  1. <script src="jquery.js" type="text/javascript"></script>
  2. <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.

CSS:
  1. #tooltip {
  2.     background-color: #CCCCCC;
  3.     border: 1px solid #888888;
  4.     color: #333333;
  5.     padding: 4px;
  6.     -moz-border-radius-bottomleft: 7px;
  7.     -moz-border-radius-bottomright: 7px;
  8.     -moz-border-radius-topleft: 0;
  9.     -moz-border-radius-topright: 7px;
  10. }
  11. #tooltip h3 {
  12.     font-size: 1.1em;
  13.     margin: 0;
  14.     padding: 0 3px;
  15.     text-align: left !important;
  16. }
  17. #tooltip p {
  18.     font-size: 0.95em;
  19.     margin: 5px 0 0 5px;
  20.     text-align: left;
  21. }

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:

HTML:
  1. <script type="text/javascript">
  2. $(function() {
  3.     // modify global settings
  4.     $.extend($.fn.Tooltip.defaults, {
  5.         track: true,
  6.         delay: 0,
  7.         showURL: false,
  8.         showBody: " - "
  9.     });
  10.     $('a, input, img').Tooltip();
  11. });
  12. </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.

HTML:
  1. <a href="http://www.google.com"
  2. title="Google - http://www.google.com">Google</a>

Finalmente uniendo todas estas piezas obtenemos el código final para nuestro ejemplo:

HTML:
  3. <title>jQuery Tooltip by unijimpe</title>
  4. <style type="text/css">
  5. body {
  6.     font-family: "Trebuchet MS", Verdana, Arial;
  7.     font-size: 12px;
  8.     color: #777777;
  9.     background-color: #F6FAFA;
  10. }
  11. #tooltip {
  12.     background-color: #CCCCCC;
  13.     border: 1px solid #888888;
  14.     color: #333333;
  15.     padding-top: 4px;
  16.     padding-bottom: 4px;
  17.     padding-left: 10px;
  18.     padding-right: 10px;
  19.     -moz-border-radius-bottomleft: 7px;
  20.     -moz-border-radius-bottomright: 7px;
  21.     -moz-border-radius-topleft: 0;
  22.     -moz-border-radius-topright: 7px;
  23.     max-width: 20em;
  24.     line-height: 12px;
  25. }
  26. #tooltip h3 {
  27.     font-size: 1.1em;
  28.     margin: 0;
  29.     padding: 0 3px;
  30.     text-align: left !important;
  31. }
  32. #tooltip p {
  33.     font-size: 0.95em;
  34.     margin: 5px 0 0 5px;
  35.     text-align: left;
  36. }
  37. </style>
  38. <script src="jquery.js" type="text/javascript"></script>
  39. <script src="jquery.tooltip.js" type="text/javascript"></script>
  40. <script type="text/javascript">
  41. $(function() {
  42.     // modify global settings
  43.     $.extend($.fn.Tooltip.defaults, {
  44.         track: true,
  45.         delay: 0,
  46.         showURL: false,
  47.         showBody: " - "
  48.     });
  49.     $('a, input, img').Tooltip();
  50. });
  51. </script>
  52. </head>
  54. <h3>jQuery Tooltip by unijimpe </h3>
  55. <p>Esta es una prueba de jQuery Tooltip</p>
  57.   <li><a href="http://www.google.com" title="Google - http://www.google.com">Google</a></li>
  58.   <li><a href="http://blog.unijimpe.net" title="unijimpe - http://blog.unijimpe.net">unijimpe</a>  </li>
  59. </ol>
  60. </body>
  61. </html>

Con lo cual obtenemos el siguiente resultado.

tooltip.gif

Finalmente y a pedido de nuestros visitantes les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan probarlo funcionando.

Posts Relacionados

Total de Comentarios: 7

Publicidad
necudeco
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

unijimpe
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.

Manuel Víquez Carazo
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

kary
25/07/2007
1:39 am

muy bueno… voy a usarlo en mi pagina pero con otro diseño… muchas gracias!!

Ghis
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

elfleat
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 =)

Antonio
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

Enviar Comentario

(*)

(*)