How to Create ToolTips for Bookmarks in WordPress

  • Autor Autor Stricors
  • Fecha de inicio Fecha de inicio
S

Stricors

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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!.....
 
Última edición:
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:

Insertar CODE, HTML o 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!...
 
Viejo esto seguramente te va a ayudar mucho

30 estilos de tooltip!

Enlace eliminado

Saludos, dedido si ves q me lo merezco ?¿ xD
 
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
 

Adjuntos

Última edición:
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!
 
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!
 

Adjuntos

Última edición:
A lo mejor es un problema de posición nada más.
Edita el archivo tipsy.css y en donde dice:
Insertar CODE, HTML o PHP: 
  .tipsy-north { background-position: top center; }
Cambia los valores de top. Puedes usar cualquier unidad de medida compatible. Prueba algo como:
Insertar CODE, HTML o PHP: 
  .tipsy-north { background-position: 50% -10%; }
Puedes ver más aquí:
Enlace eliminado

Espero que eso te ayude, saludos
 
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!
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
How to create template preview
Respuestas
3
Visitas
290
Akhenon
Curso gratis en Udemy "How To Create A Website For Free. Free Domain|Free hosting"
Respuestas
1
Visitas
529
rilex123
R
Curso gratis en Udemy "How to Create a Best-Selling Online Course in 7 Steps", inglés
Respuestas
2
Visitas
385
perez2005
Curso gratis para ti - Photoshop Effects - How to Create Photo Effects, en Udemy
Respuestas
0
Visitas
158
ramonjosegn
Curso de 1 hora - Photoshop Effects - How to Create Photo Effects, gratis/cupón
Respuestas
1
Visitas
238
Adrian Gomez
Menú
Acceder
Registro