Incorporar jQuery TipTip en WordPress

jQuery, Tutoriales WordPress Publicado por Claudia en septiembre 13, 2011

jquery titptip wordpress
TipTip es un popular plugin jQuery de bajo peso desarrollado por Drew Wilson que permite añadir tooltips a tu blog sólo con CSS, y mediante el atributo “title”. La gracia que tienes es que no necesita imágenes, es fácil de incorporar y, como cualquier tooltip, además de verse bonito contribuye a la usabilidad web.

Para incorporarlo en tu blog de WordPress, sigue los siguientes pasos:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu header.php, antes de </head>:

1
2
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

2. Descarga el plugin desde la web del autor

Ve a Drew Wilson Code y descarga el paquete de jQuery TipTip. Descomprime el paquete y sube el archivo “jquery.tipTip.js” vía FTP en la carpeta “js” de tu theme (si no existe, créala). El contenido de tipTip.css puedes pegarlo al final de tu style.css.

3.Haz el llamado desde tu header.php

Justo bajo <?php wp_head(); ?>, pega los siguientes códigos:

1
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.tipTip.js" type="text/javascript"></script>
1
2
3
4
5
<script type="text/javascript">
jQuery(function(){
jQuery(".tooltip").tipTip();
});
</script>

4. Añade TipTip de forma manual a tus enlaces

Puedes seguir el siguiente ejemplo:

<a href="http://chicablogger.com" title="Recursos para Blogger y WordPress" class="tooltip">Chica Blogger</a>

Tanto el atributo “title” como la clase (class=”tooltip”) son necesarios y obligatorios para que funcione el plugin. Debes añadirlos donde quieras que se muestre el tooltip.

5. Añade TipTip de forma automática a tus enlaces

Habrás notado que WordPress ha añadido títulos de forma automática a algunas secciones importantes. Incorporando una variable, se puede lograr que los tooltips se muestren de forma automática en cada lugar donde se use el atributo “title”:

1
2
3
4
5
6
7
<script type="text/javascript">
jQuery(function(){
jQuery(".tooltip").tipTip();
var title = jQuery(".tipTip").attr("title");
jQuery("a").tipTip(title);
});
</script>

Habrás notado lo sencillo que es añadir TipTip a tu WordPress. No hay más cambios que hacer, a menos que quieras hacer algunos cambios en el CSS.

Compártelo!
8 Comentarios en Incorporar jQuery TipTip en WordPress
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: TipTip es un popular plugin jQuery de bajo peso desarrollado por Drew Wilson que permite añadir tooltips a tu blog sólo con CSS, y mediante el atributo “title”. La gracia que tienes es que no necesita imágenes, es fác……

  2. […] En Blogger puedes añadir tooltips con jQuery TipTip de manera similar a la incorporación en WordPress: […]

  3. Daniel Lemes dice:

    Gostei do estilos destes tips, vou testar. Gracias!

  4. Fernando dice:

    Hola! quería preguntarte si sirve para desplegar tool tips al sobrevolar un imagen que a su vez está dentro de un anchor (a href), y si es así, cual sería el procedimiento para lograrlo…
    Desde ya muchas gracias!

  5. Fernando dice:

    Perdón! ya lo solucioné y funciona a la perfección con imágenes… mi único problema es que por lo menos en chrome en OSX, junto al tool tip, aparece el tip del title por default (el rectangulito color rosa damasco), no sé como evitarlo!

  6. Fernando dice:

    Bien, también solucioné eso… solo tengo que dejar el title en el anchor, no en el img src.
    Ahora… Quiero poner los tips SOBRE el objeto… he probado esto pero no me resultó.. algun “tip”? 🙂

    $(function(){
    $(“.someClass”).tipTip({defaultPosition: “top”, edgeOffset: 10});
    });

  7. […] En Blogger puedes añadir tooltips con jQuery TipTip de manera similar a la incorporación en WordPress: […]

  8. Mateen dice:

    Aritcles like this are an example of quick, helpful answers.

Deja tu comentario
Tu Comentario