How to Create ToolTips for Bookmarks in WordPress

Stricors · 02/07/2010

Hola a todos, mis saludos!

Necesito saber como hacer un ToolTips asi como se aprecia en la siguiente image (el globito negro)

Enlace eliminado

Encontre un tuto pero no lo entendi Enlace eliminado

Quiero hacerlo para ponerselo a las bookmarks en mi wordpress.

Saludos a Todos, se les agradece la ayuda!.....

Alan Medina · 03/07/2010

Es un plugin para jQuery.
Si no estás familiarizado con JavaScript, te recomiendo que leas un tutorial básico. No es difícil 😀
En la página que mandaste vienen las instrucciones precisas para hacerlo funcionar, ¿cual es la parte que no entiendes?. Así te podemos ayudar mejor.

Stricors · 03/07/2010

Alan Medina disse:
Es un plugin para jQuery.
Si no estás familiarizado con JavaScript, te recomiendo que leas un tutorial básico. No es difícil 😀
En la página que mandaste vienen las instrucciones precisas para hacerlo funcionar, ¿cual es la parte que no entiendes?. Así te podemos ayudar mejor.

hOLA GRACIAS por responder.

Aparte de que esta en ingles no explica bien los pasos a seguir.... no se nada de JQuery.

por lo que parece tu si tienes conocimiento, seria agradable que me explicaras como aplicarcelo a las bookmarks, a continuacion te dejo el codigo HTML de las bookmarks:

Inserir CODE, HTML ou PHP:

<div style="text-align: right; color: rgb(136, 136, 136); font-size: 14px; margin: 10px 0pt;"> Te gusto el post? Compartelo en:<br />
  
  <ul class="post-compartir">
  </ul><a target="_blank" style="margin: 0px;" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;amp;t=<?php the_title(); ?>"><img border="0" style="margin: 0pt; border: medium none;" src="/icos/compartir_iconos/facebook_32.png" alt="FaceBook" /></a>

<span>

<a href="http://www.twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink(); ?>" target="_blank"><img border="0" style="border: medium none;" src="/icos/compartir_iconos/twitter_32.png" alt="Twitter" /></a>

<span>

<a href="http://www.sonico.com/share.php?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" target="_blank"><img border="0" style="border: medium none;" src="/icos/compartir_iconos/sonico_32.png" alt="sonico" /></a>

<span>

<a href="http://www.digg.com/submit?phase=2&amp;amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" target="_blank"><img border="0" style="width: 32px; height: 32px;" src="/icos/compartir_iconos/digg_32.png" alt="Digg" /></a>

<span>

<a href="http://www.del.icio.us/post?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" target="_blank"><img border="0" style="border: medium none;" src="/icos/compartir_iconos/delicious_32.png" alt="Delicious" /></a></div>

Saludos, Sabre agradecer su ayuda!...

Nicolas · 03/07/2010

Viejo esto seguramente te va a ayudar mucho

30 estilos de tooltip!

Enlace eliminado

Saludos, dedido si ves q me lo merezco ?¿ xD

Alan Medina · 03/07/2010

Deberías buscar un tutorial de jQuery; en Cristalab hay algunos muy buenos.

Primero debes descargar jQuery y el plugin llamado typsi.
Para empezar, en la parte del header de tu página debes colocar este código (antes de </head>)

HTML:

<script type="text/javascript" src="carpeta/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="carpeta/jquery.tipsy.js"></script>

Obviamente debes cambiar carpeta/jquery-1.3.2.min.js por la ruta que tengas en tu theme.
Ahora debes colocar esto después de <body>:

HTML:

<script type='text/javascript'> 
  $(function() {
    $('#ejemplo').tipsy();
  });
</script>

Luego debes hacer un elemento cuyo ID sea "ejemplo":

HTML:

<a id="ejemplo" href="#" title="texto del tooltip">Pasa el mouse encima de mi</a>

En la página de plugin vienen los argumentos y la forma de usarlos. Si no entiendes Inglés, usa el traductor de Google, que es bastante bueno para que tengas una idea 😀
Espero que ayude.

Actualización: Hice un ejemplo rápido. Es muy sencillo y puedes estudiar el código. Es en formato zip. Solo lo descomprimes y abres el index.html en tu navegador

Enlace | Enlace eliminado
Enlace | Descargar jQuery

Stricors · 03/07/2010

Eres lo mejor, amigo verdaderamente estoy muy agradecido, le tengo mucha fé a este foro porsupuesto a los que colaboran como tu... y gracias a los demas... cualquier cosa que no entienda preguntare x aca..

Saludos!

Stricors · 03/07/2010

Amigo lo he logrado integrar, el unico problema que tengo es el siguiente:

si pongo que el globito salga x arriba sale es a mitad de la imagen del bookmarks y si lo pongo abajo si aparece bien:

Captura Globito abajo (perfecto):

Enlace eliminado

Captura Globito arriba (este falla con firefox, con opera y chromo funciona bien)

este es el que quiero usar con el globito arriba.

Enlace eliminado

Adjunto los archivos que use y tambien el codigo que use para la integracion, espero que lo puedas revisar y encontrar la falla, tambien agregue mi single.php.

P.D: el codigo que encontraras en la descarga lo use exactamente como aparece, y lo integre al single.php de mi theme wordpress.

Actualizo: Estuve probando con varios navegadores y solo logra funcionar en firefox y IE 6, No funciono en Opera ni Chrome.

Estuve probando solo el codigo html y funciona en todos los navegadores pero solo falla cuando lo agrego al single.php de mi theme...

Saludos amigo!

Alan Medina · 03/07/2010

A lo mejor es un problema de posición nada más.
Edita el archivo tipsy.css y en donde dice:

Inserir CODE, HTML ou PHP:

  .tipsy-north { background-position: top center; }

Cambia los valores de top. Puedes usar cualquier unidad de medida compatible. Prueba algo como:

Inserir CODE, HTML ou PHP:

  .tipsy-north { background-position: 50% -10%; }

Puedes ver más aquí:
Enlace eliminado

Espero que eso te ayude, saludos

Stricors · 03/07/2010

gracias, pero no sirvio de nada... probando solo el codigo del bookmarks funciona de maravilla y en todos los navegadores, el problema lo presenta cuando lo pongo en el theme y tambien da falla en otros navegadores en el cual no muestra el tipsy, en firefox y IE6 son los unicos que se ve.

Saludos desde Venezuela!

How to Create ToolTips for Bookmarks in WordPress

Stricors

Alan Medina

Stricors

Nicolas

Alan Medina

Anexos

Stricors

Stricors

Anexos

Alan Medina

Stricors

Tópicos similares