Skip to Content »

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.

  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.

  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:

  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.

  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:

  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" onclick="javascript:pageTracker._trackPageview ('/outbound/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

No hagas Click

  • 24/11/2006
  • 10:17 pm
  • unijimpe

Don’t Click It es un experimento de diseño de interfaces. Se trata de una web donde no están permitidos hacer clicks para la navegación, solo se permite un click para iniciar. Si haces click se sacudirá la pantalla y te preguntará por que hiciste click.

dontclick.jpg

Se trata de un experimento para que veamos que tan adictos a hacer click somos los usuarios. Toda la interfaz de la página esta diseñada y desarrollada para navegarla sin necesidad de hacer ningún click, posicionando en cualquier botón este automáticamente se desplegará.

Es necesario mencionar que es un muy buen trabajo en Flash en el cual se ha desarrollado toda una interfaz en base a rollOver y no onRelease con lo cual es muy interesante. Date una vuelta por este site y comprueba tu nivel de adicción a hacer click en cualquier parte, verás que te cuesta acostumbrarte y como sientes la necesidad de hacer click.

Posts Relacionados

WP-SnapPreview

  • 20/11/2006
  • 2:24 am
  • unijimpe

WP-SnapPreview es un plugin para agregar automaticamente el servicio Snap Preview Anywhere™ a tu blog WordPress. Este lo plugin fue desarrollado para facilitar a los usuarios de WordPress para evitar el proceso de editar sus templates para incluir los javascript necesarios para su funcionamiento.

Instalación
Para instalar el plugin, descomprimes el archivo descargado y colocas el archivo wp-snappreview.php a tu carpeta de plugins, típicamente en /wp-content/plugins/. El siguiente paso es ir al panel de administración de tu blog y en el tab de plugins activar WP-SnapPreview.

snapconfig.jpg

Configuración
WP-SnapPreview tiene tres parámetros de configuración los cuales describimos a continuación:

  • Snap Key: es el número key de 32 caracteres generado al momento de suscribirte a Snap.
  • Searchbox below the thumbnail: Activa esta opción si deseas que aparezca el formulario de búsqueda de Snap debajo del thumbnail generado.
  • Preview for local links: Activa esta opción si deseas que se muestren thumbnails internos de tu blog.

Hemos trabajado con mucho entusiasmo pues este servicio nos parece muy interesante y como siempre estamos a la espera de sus preguntas y comentarios. Además de ello puedes participar en nuestro foro acerca de WP-SnapPreview,

wp-snap.jpg

Como nota adicional debo comentarles que para que funcione correctamente en el archivo de tu theme tiene que estar la función: wp_footer(), si no es asi abre el archivo footer.php de tu theme y agrega antes del tag </body> y listo:

  1. <?php wp_footer(); ?>

Posts Relacionados