Tooltips con jQuery

1 de agosto de 2010 106 comentarios ,
TinyTips con jQuery
En la entrada anterior vimos cómo poner tooltips sólo con CSS el cual es bastante sencillo y resulta ligero para el blog, sin embargo hay quienes prefieren algo un poco más sofisticado y un poco más fácil para agregar estos mensajes emergentes, así que usando jQuery y tinyTips podemos crear un tooltip con un efecto muy ligero de desvanecimiento pero sobre todo mucho más llamativo.

Puedes ver un ejemplo en este blog de pruebas, verás en el texto algunos enlaces que contienen tooltips así como la imagen del final.

La instalación es muy sencilla, primero descarga este archivo, descomprímelo y sube el archivo jquery.tinyTips.js a un alojamiento.

Después entra en Diseño | Edición de HTML y pega antes de </head> pega esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo jquery.tinyTips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.tTip&#39;).tinyTips(&#39;title&#39;);
$(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);
});
</script>

Agrega donde se indica la URL del archivo que subiste previamente.

Después agrega antes de ]]></b:skin> lo siguiente:
.tinyTip {
width: 325px;
padding: 17px 0px 0px 0px;
display: block;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TFBquz_sIxI/AAAAAAAAATU/SlLA5ihQmrQ/s1600/tinyTip-top.png) 0px 0px no-repeat;
}
.tinyTip .content {
padding: 0px 15px 0px 15px;
font-size: 14px;
font-family: "Lucida Sans Unicode";
color: #010101;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TFBqtTgGbAI/AAAAAAAAATM/b_QYkpj_LGE/s1600/tinyTip-content.png) 0px 0px repeat-y;
}
.tinyTip .bottom {
height: 47px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TFBqrZVQluI/AAAAAAAAATE/ycv_Nj0SatM/s1600/tinyTip-bottom.png) 0px 0px no-repeat;
font: 0px/0px sans-serif;
}

Con eso ya tenemos todo listo para que los tooltips funcionen, ahora sólo cuando quieras usar uno dentro de una entrada usa el siguiente código:
<a class="tTip" href="#" title="Este es el contenido del tooltip que quieres mostrar">Texto</a>

Como puedes ver lo único que hemos hecho es agregar la clase tTip que será la que muestre la imagen del globo y dentro del atributo title, (lo que está en color verde) irá el contenido del tooltip.

Y para utilizarlo en una imagen es lo mismo, sólo usamos el siguiente código:
<img class="tTip" title="Este es el contenido del tooltip que quieres mostrar" src="URL de la imagen" />

Del mismo modo agregamos lo que está en negrita, luego el contenido del tooltip y la URL de la imagen donde se indica.

Como ves el procedimiento es mucho más sencillo que el hecho con CSS y el resultado es más llamativo, aunque quienes usen otras librerías como Scriptaculous y Mootools seguramente no podrán utilizarlo. Sin embargo después veremos otras opciones de tooltips para esas librerías.


106 comentarios en:

" Tooltips con jQuery "

  1. Wow... que bonito se ve eso Bro... me encanta!!! :D

    Un abrazo!!!

    ResponderEliminar
  2. Hola, yo se que tu eres el experto en todos estos temas de blogger..... y enserio necesito ayuda con algo,,,,

    Mira lo que pasa es que necesito poner una busqueda avanzada en mi blog, osea que me de muchas opciones para filtrar contenidos, como por ejemplo....

    ciudad: (barra desplegable con ciudades)
    precio: (mayor a 100 pesos, menor a 100 pesos)
    marca: (barra desplegable con maracas)

    y asi sucesivamente....

    ME PODRIAS AYUDAR A CONSEGUIR ALGO ASI...???

    Gracias de antemano

    ResponderEliminar
  3. bro, qué bueno que te ha gustado, igual mí, lástima que no puedo usarlo :\


    JUVENTUDES MIRA PASTO, creo que eso se podría hacer con PHP pero sobre ese tema no sé nada, siento no poder ayudarte.

    ResponderEliminar
  4. Potro, ahora si que has dado en el clavo, es justo lo que buscaba y el anterior no funcionaba en mi blog, creo que porque tengo puesto un gif al pasar el ratón por los links.

    Además he echo un enlace cambiando # por el nombre de la dirección que hay después de /

    Cada día te superas más, ya tienes mas de 1000 seguidores y llegarás a ...

    ResponderEliminar
  5. Hola Potro, un gusto está leyendo tus post, este especialmente me gusta, ya lo estaré poniendo en mis proyectos.

    Un saludo!

    ResponderEliminar
  6. Alberto, son más de 1000 gracias a ustedes, ojalá Dios me permita más tiempo para poder compartir con ustedes un poco de lo que sé y de lo que aprendo.

    Eduardo, gracias por pasar, qué bueno que te ha gustado.

    ResponderEliminar
  7. Mas O Menos a que alojamiento debo de subir el archivo ??

    ResponderEliminar
  8. Cualquiera que permita alojar archivos .js por ejemplo Google Sites o Dropbox.

    ResponderEliminar
  9. Google sites no pero dropbox si :D grax hermano

    ResponderEliminar
  10. Genial tu blog oye .Mi pregunta es sencilla aunque no se si habra solucion:
    me gustaria en mi blog de blogger ver las entradas de mas antiguas a mas nuevas, justo al contrario de como lo hacen ahora.gracias

    ResponderEliminar
  11. Va bien, lo único...
    ¿de donde sacas las ideas?

    Si supiera cómo hacer para que suene un sonido cada vez que salga sería genial.

    Bueno, pero ya lo es, pero tu más.
    XD

    ¿no tienes vacaciones?

    ResponderEliminar
  12. Jose Martinez J, de manera automática no se puede, pero puedes cambiar el orden cronológica editando cada entrada, aquí se explica cómo.


    Drawer 4 Everyone, pues no son ideas mías, son de los desarolladores que amablemente los ponen al alcance de todos, yo sólo explico cómo instalarlo :)

    ResponderEliminar
  13. woooooo esta buenisimo gracias potro ;) lo aplicare, me gusto muchisimo, Saludos

    ResponderEliminar
  14. Gracias por pasar wn, qué bueno que te gustó.

    ResponderEliminar
  15. Como le hago para que los Tooltips no tengas ingun enlace ya que le doy al Tooltips y me lleva ala edicion de la entrada??

    ResponderEliminar
  16. olle potro gran articulo, olle como ases para que las entradas se enumeren de arriba a abajo

    ResponderEliminar
  17. que buen blog paso siempre, muy buenos trucos :D

    queria hacerte una consulta potro, ya que vi que vos tenesun dominio co.cc (o espero que lo tengas:P) jajaj

    cuando pasa el año o sea cuando expira, para renovarlo tenes que pagar 3 dolares o es gratis siempre que conserves la misma cuenta?

    ojala sepas, me salvas la vida, un abrazo grandee!

    ResponderEliminar
  18. Infinit Corporation, sólo elimina del código donde dice href="#"

    JuanBnna, ¿las entradas o los comentarios?

    Alejandro, cuando falten unos días para que venza el año te aparecerá un mensaje en tu panel de control, sólo confirmas que sigue siendo un sitio personal y listo, no te cobrará.

    ResponderEliminar
  19. muchass graciass, sos un genioo y siempre re buena onda para contestar :D

    gracias de nuevoo, saludoss

    ResponderEliminar
  20. Muy bueno Potro!!! Después veo que sale con esto, jejeje...
    El blog en el que las imágenes png se ven con fondo blanco es www.planeta-grandt.com.ar. Y más específicamente, en ésta entrada puedes observar el fondo blanco en la imagen sin fondo.
    Sabes sacarle ese fondo blanco???

    ResponderEliminar
  21. Me gustaria que me ayudaras, es que no logro que mi blog aparesca en los buscadores y solo resivo visitas desde el facebook, y quisiera resivir mas visitas.
    Ayudame por favor a ver como hago, para que mi blog sea bueno en los buscadores como el tuyo.

    ResponderEliminar
  22. Pozo+10™,

    Busca esta parte en tu plantilla y elimina lo que está en negrita:

    .post img {
    margin: 0px;
    padding: 0px;
    background: #ffffff;
    border: 0px solid #ffffff;
    border-width: 0;
    }

    Si te fijas abajo de lo que eliminaste también hay un borde en las imágenes, también puedes borrarlo si lo deseas.

    ResponderEliminar
  23. _________, mira esta entrada para que te des de alta en los buscadores. Toma en cuenta que nada es rápido, todo lleva su tiempo y sobre todo trabajo, así que hay que escribir mucho y esperar.

    JuanBnna, mira esta entrada de Oloblogger que explica cómo hacerlo.

    ResponderEliminar
  24. No potro no me aparece eso, solo aparece en ver código de fuente, pero en edición de HTML aparece esto:
    .post img {
    margin: 0px;
    padding: 0px;
    background: $imagebgColor;
    border: 0px solid $imageBorderColor;
    border-width: 0;
    }

    Borro background: $imagebgColor; ????

    ResponderEliminar
  25. Muchas gracias como siempre compañero!!! De 10!!!

    ResponderEliminar
  26. Potro yo quiero aplicarle el Tooltips a una imagen con enlace, como seria el código que no lo puedo adivinar??? :P jejeje

    ResponderEliminar
  27. Buenas potro.
    Me he dado de alta en BinLayer, que es un sistema de publicidad. Me dice lo siguiente: Por favor, coloque el siguiente código de JavaScript en su texto fuente (óptimamente delante del -Tag):
    No se como hacerlo. He probado ha hacerlo añadiendo en un gadget pero no realiza las funciones prevista.
    Se trata de publicidad flotante compatible con assense.
    Espero tu contestación, gracias y un saludo.

    ResponderEliminar
  28. Pozo+10™, del mismo modo que se ejemplifica en la entrada, sólo agrega después de img lo que está en negrita así como el title, mira bien el código de ejemplo para que te guíes.

    Blincacequias, no tengo idea, nunca he usado ese sistema de publicidad.

    ResponderEliminar
  29. Potro
    Por tu experiencia puedes saber en que lugar de la plantilla hay que colocar el código de javascript que me genera para colocar la publicidad.

    Un saludo y gracias como siempre.

    ResponderEliminar
  30. Ya di de alta mi blog en los tres buscadores, y me gustaria que opinaras sobre el diseño de mi blog y que mejoras le deberia haces, la verdad que es muy importante para mi tu consejos, ya que eres un man muy inteligente, y creativo, y gracias por la respuesta anterior y la proxima.

    Y este es mi blog
    http://negociosovida.blogspot.com/

    ResponderEliminar
  31. Gracias Potro, estuve 30 min. pero salió :P jajajaja
    Mira en este blog de pruebas como me quedo: planetagrandt-pruebas.blogspot.com. Lo único malo es que me quedó el efecto sobre la imagen no se por que, lo podré modificar de algún lado???

    PD: gracias por el comentario 24, ya dí de alta mi blog en esos 3 buscadores que nunca lo había hecho, pero ya aparecía igual en google por lo menos mi blog no se por que, jejejeje

    ResponderEliminar
  32. Blincacequias, como te mencioné, no lo he usado antes, no sabría si funciona igual que Adsense (que es el único que he usado además del de Mercado Libre), pero si fuera el mismo caso debería bastar con entrar en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript, y ahí pegarlo. Pero repito, nunca lo he usado así que no sé si es ahí el lugar indicado.


    _________, te ha quedado muy lindo el diseño de la plantilla ;)

    Pozo+10™, no lo sé, se supone que debe quedar siempre arriba, pero como modificaste la imagen quizá por ahí se vio afectado algún estilo, aunque así se ve bien.

    ResponderEliminar
  33. muy buen estilo potro, yo hace poco publique el tooltip estilo facebook y me quedo muy bien aunque admito que este tooltip es muy util sobre todo para dar una pequeña descripcion como en el blog de pruebas :D

    ResponderEliminar
  34. Gracias Potro, ya lo puse y le encontré algo malo :-(
    Lo siguiente: si tenes Prototype y Scriptaculous para Ir Arriba e Ir Abajo, el script de Tooltips con jQuery lo tienes que poner debajo de Prototype y Scriptaculous, pero el efecto deslizante no te funciona mas :-( y si pones el script de Tooltips con jQuery arriba de Prototype y Scriptaculous no te funciona el Tooltips con jQuery :-( que lastima todo lo malo me toca a mi :-( justo tongo los 2 y ahora uno no me funciona :-(

    ResponderEliminar
  35. Pozo +10, necesitas una función llamada jquery conconflict, yo la uso, mira el menú con jquery y las flechitas con prototype y scriptaculous.

    Si quieres te digo cómo hacerlo.

    ResponderEliminar
  36. CHiCken, por suerte hay bastantes tipos de tooltips de dónde escoger, ya cada será de cada quién usar el que se adapte a sus necesidades.

    Pozo+10™, ya otras veces te he hablado de esa incompatibilidad de librerías.

    ResponderEliminar
  37. ¡Hola Potro, buen post!, solo te quería preguntar, como haces para tener esos botones de arriba(Son los que muestran las paginas) y si se puede editar sus links y la imagen porque me serviría mucho, y si ya hiciste una entrada sobre mi duda pasame el link. ¿Y se puede editar el link de los botones?. ¡Gracias!

    ResponderEliminar
  38. Potro genial tus aportes como siempre!! te felicito y de paso te pregunto,hay algún problema si pongo una imagen de este blog para que mis visitantes puedan visitarte?? es decir puedo enlazarte o como se diga? jaja soy nuevo en el mundo blogger!!

    ResponderEliminar
  39. te hago otra pregunta Potro:Lois anuncios Google son gratis? puedo ponerlos en mi blog q no tengo q pagar nada?Espero tu respuesta!! Gracias!

    ResponderEliminar
  40. Aqui12, ese es un menú parecido a este, y aquí hay más pestañas.

    Fiebre Xeneize, por el contrario, muchas gracias por el enlace, aquí hay algunas imágenes que puedes elegir.
    En los anuncios de Adsense son ellos quienes te pagan a ti por mostrar sus anuncios dependiendo de cuántos clicks se hagan en ellos; aquí hay más información.

    ResponderEliminar
  41. Potro,
    He intentado poner la fecha en la cabecera del blog pero no encuentro la etiqueta para colocar el texto encima. Me puedes ayudar.
    Por cierto te he enlazado, espero que te guste, si quieres que ponga otro diseño me lo dices.
    http://elmundobasedow.blogspot.com/
    Un abrazo.

    ResponderEliminar
  42. Gracias Potro como siempre...de todas manera mi iontención no es ganar dinero sino meterle un poco de publicidad.Son mis primeros dias usando blogger y no quiero apurarme.Voy a poner Adsense sin importarme el dinero por el momento.GRacias nuevamente!!

    ResponderEliminar
  43. Blincacequias,

    Para que no haya confusiones entre los lectores vamos a poner los comentarios de otras entradas en la entrada que le corresponde ;)

    Puedes probar ponerlo arriba de:

    <div class='body-fauxcolumns' id='outer-wrapper'>

    Saludos y gracias por el enlace.

    ResponderEliminar
  44. ¡Muchas Gracias! Eres un genio...

    ResponderEliminar
  45. Hola me gusta mucho este truco.
    pero tengo un problema, tengo puesto los codigos de que van antes del /head del "tooltip" y "mostrar y ocultar texto",
    Asi:

    codigo tooltip
    codigo Mostrar y ocultar texto
    /head

    pero solo funciona el de Mostrar y ocultar texto pero si cambio de posicion los 2 codigos, funciona el de tooltip pero deja de funcionar el otro..

    ¿de que manera debo poner el codigo?
    ¿se pueden poner los 2 al mismo tiempo sin que haya problema??

    ResponderEliminar
  46. Usas jQuery para este truco y Scriptaculous para ocultar textos. Estas librerías no son compatibles entre sí, es por eso que si usas las dos juntas deja de funcionar una.

    ResponderEliminar
  47. Potro, me aparecen corridas los "goblos" fijate en mi blog
    http://vacilandounrap.blogspot.com
    Es en el 1º gadget que dice "Redes Sociales"
    Saludos men ;) ojala me ayudes ;)

    ResponderEliminar
  48. ¿Ya probaste con un texto más corto?

    ResponderEliminar
  49. Si, tambien probe con un texto mas corto vea en esta entrada "http://vacilandounrap.blogspot.com/2010/09/mic-aberracion-secuelas-2007-08.html"

    la palabra "kiltros" ubicada en el "tracklist" del disco.
    tambien probe subiendo las imagenes a mi propio hosting (Dropbox) para probar si era eso, pero sigue igual...


    saludos ;)

    ResponderEliminar
  50. Definitivamente debe ser algún estilo de la plantilla que no permite que se muestre en el lugar correcto.
    Supongo que tendrás que considerar probar con otro tipo de tooltips hasta dar con uno que funcione al 100%

    ResponderEliminar
  51. Cuando intruduzco el texto antes de /head se me jode el menu dock (parte 2)

    ResponderEliminar
  52. Si ya tienes el menú dock entonces omite poner de nuevo esta parte:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

    ResponderEliminar
  53. Potro... tiempo sin pasarme por acá, años! pero vos seguís aqui!

    Que grossa tu labor!

    Me preguntaba como hacer para quitarle el fondo blanco a las imágenes PNG que coloco en mis entradas! Las quiero transparentes! :S
    Vi que Pozo+10 tenía el mismo problema, pero creo que el código de este ítem, varia según la plantilla!

    Si podés encontrarme la parte del codigo que me hincha las bolas, estaré muy agradecido!

    Mi blog es http://comometanfetamina.blogspot.com

    ResponderEliminar
  54. Hola Elle,

    Pues bienvenido de nuevo.
    Busca este código:
    .post img,table.tr-caption-container {
    background:none repeat scroll 0 0 #F2F2F2;
    border:2px solid #CECDCD;
    padding:5px;
    }

    Y cambialo por este otro:
    .post img,table.tr-caption-container {
    padding:5px;
    }

    ResponderEliminar
  55. Capo! Sos un capo! Por eso hago click en la publicidad de tu pagina!

    Muchas gracias! Muy útil vos y la ciudad!!

    ResponderEliminar
  56. SE PUEDE QUE EN EL AREA DONDE VA EL TITLE EN LUGAR DE TEXTO LLEVE UNA IMAGEN?

    ResponderEliminar
  57. Sí, pero sería la misma imagen siempre. Para ello busca esta parte en el código que pegaste:
    $(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);

    Cambiala por esta:
    $('a.imgTip').tinyTips('<img src="URL de la imagen" />');

    Ahí pon la URL de la imagen que quieres, luego cuando quieras que aparezca dentro el Tooltip usa este código:

    <a class="imgTip" href="#">texto</a>

    ResponderEliminar
  58. Hola Potro, a ver si me puedes echar un cable con una dudilla...

    He probado esto y me funciona perfectamente (gracias, por cierto!). Lo que pasa es que además de texto, quiero poner imágenes y videos de youtube (he visto que se puede hacer con un jquery llamado Qtip).

    Lo de las imágenes ya lo he conseguido... lo malo es que si la imagen es más ancha que el "globo", se sale por fuera y queda poco estético.

    1ª duda, ¿como arreglar esto? ¿se puede hacer algo para que el globo ajuste el ancho automáticamente tal y como lo hace con la altura?.

    Respecto a lo de poner videos de youtube, también lo he "conseguido" ... porque, además de pasar lo mismo que con las imágenes (que se sale fuera del globo si no ajustas el ancho del video), el video solo aparece en pantalla mientras estás colocando el cursor sobre el link (ie, cuando quitas el cursor para ir a darle al play, el video desaparece).

    Por tanto, ¿hay alguna manera de hacer que el video se quede en pantalla permanentemente? No sé mucho de lenguajes web (lo mio es prueba y error, puro y duro XD) pero he leído que tiene que ver con la propiedad "hover" de los links...

    Bueno, espero haberme expresado con claridad. Si tienes tiempo para mirar esto, te estoy eternamente agradecido. Saludos (baladamenti@msn.com)

    ResponderEliminar
  59. Hola Henry,

    El ancho de los tooltips está determinado por tres imágenes que son las que conforman el recuadro que encierra el texto. En el código podrás ver las URLs de ellas que podrías editar para obtener el ancho que buscas. En el caso de la primera URL verás que en esa área del código hay un ancho definido como width: 325px; ese ancho también deberás cambiarlo por el ancho nuevo que tengan tus imágenes.

    Sobre los videos en este método no creo que te funcione, para esos casos puedes usar el que ya probaste, qTip, que sí te permitirá agregar diversos contenidos al tooltip. Por ahora yo no lo he usado así que no sabría darte las indicaciones correctas pero en estos días hare una entrada sobre ello.

    Saludos.

    ResponderEliminar
  60. Gracias, ya he encontrado lo que dices y creo que me servirá :)

    Yo el qTip no lo probé (cuando lo mencioné me refería a que vi una demo en su página web, pero nunca lo puse en mi plantilla). El problema con ese tooltip es que parece (¿?) bastante complicado y engorroso de usar... Sería genial si haces una entrada sobre eso, porque en ninguna web he encontrado información útil sobre como sacarle partido y creo que a mucha gente le va a encantar (a mi el primero XD).

    De nuevo gracias y un saludo.

    ResponderEliminar
  61. bro! tengo un drama de apariencia!! en este Tooltips!! bro me puede ayudar? este es el link donde se demuestra el problema

    http://bit.ly/eETuFB

    en resumen... el tooltips no se muestra completamente!!

    anteriormente se veía bien.. :S

    Como veras también agregué un código Prototype y Scriptaculous... y parché los jquery para ke no tuviesen dramas! y todo bien.. pero al otro día ya no se veía igual!

    ke puede ser?

    De antemano gracias bro!!

    :S

    ResponderEliminar
  62. No creo que sea por Scriptaculous porque el parche parece bien aplicado y porque sino estuviera bien simplemente no funcionaría.
    Yo no recuerdo haberlo probado con un enlace, ¿no será por eso? ¿has intentado ponerlo en una palabra que no tenga enlace?
    ¿Hiciste algún otro cambio además de lo otro que mencionaste?

    ResponderEliminar
  63. man! saké el Link y lo reemplacé por # como esta escrito en su ejemplo... pero sigue igual!

    :S

    ResponderEliminar
  64. No sé si sea por esto pero parece que te faltó cambiar un $ en el hack. Mira en esta parte:

    $('img.tTip').tinyTips('title');
    });

    Ahí te faltó cambiar ese $ por jQuery, quizá ese sea el problema porque por más que reviso no veo qué más pueda ser.

    ResponderEliminar
  65. mmm Damn! jaja reparé lo que faltaba bro pero sigue igual! bro :/ es raro voy a utilizarlo en otro post haber si sufre el mismo problema!

    Gracias potro!

    ResponderEliminar
  66. Hola, Potro. Se me presentó un problemilla. Resulta que en mi blog he agregado un script de lightbox y éste está causándome problemas con el script del tooltip. Si coloco el script del tooltip después del script del lightbox, sí funciona, pero no funciona el lightbox para ver las imágenes.Y si pongo primero el script del tooltip antes que el del lightbox, el primero no funciona y el segundo sí. ¿Qué puedo hacer? Gracias de antemano.

    ResponderEliminar
  67. Hola Las Noticias de Tulum,

    Lo que sucede es que Lightbox usa un script llamado Scriptaculous, y estostooltips usan jQuery, estos scripts no son compatibles entre sí.
    Si bien puedes aplicar un hack para que funcionen ambos quizá sea más conveniente que uses Shadowbox, otro tipo de ventanas modales con el cual no tendrás ese problema.

    ResponderEliminar
  68. ¿Hay alguna forma para hacer que Shadowbox presente las imágenes en tamaño real? Es que necesito que en mi blog se vean algunas imágenes muy grandes, algo que con Lightbox sí me funciona, pero ahora con Shadowbox sólo se ven en tamaño reducido.

    ResponderEliminar
  69. Shadowbox muestra el tamaño de la imagen que tenga, siempre y cuando ésta no exceda del tamaño del contenedor del blog.
    De cualquier forma, si prefieres usar Lightbox entonces puedes aplicar el hack a este script de los tooltips para que puedas usarlo sin problemas.

    ResponderEliminar
  70. Potro, eres un genio. Ya quedó solucionado el problema. Apliqué el hack que me dijiste y ahora funcionan sin problemas los Tooltips y el Lightbox. Mil gracias por tus enormes aportes. Gracias. :-D

    ResponderEliminar
  71. ¡Excelente!
    Me ha funcionado de maravilla.
    Duré muchísimo para encontrar algo como esto, no es lo que más quería, pero es bastante bueno :D

    ResponderEliminar
  72. ¡Hola! Hice un blog en Tumblr y pude añadir el tooltip sin muchos problemas. Pero...

    1) No se alinea de forma centrada con relación al texto.

    2) El texto no se alinea centrado ni siquiera con text-align:center; que sólo alinea el texto con relación a todo el blog.

    Mi CSS:

    .tinyTip {
    width: 231px;
    padding: 17px 0px 0px 0px;
    display: block;
    background: url(http://i.imgur.com/uDfa6.png) 0px 0px no-repeat;
    }
    .tinyTip .content {
    padding: 0px 0px 0px 0px;
    font-size: 12px;
    font-family: "Arial";
    color: #f2f2f2;
    background: url(http://i.imgur.com/dqnqV.png) 0px 0px repeat-y;
    }
    .tinyTip .bottom {
    height: 33px;
    background: url(http://i.imgur.com/cxvz9.png) 0px 0px no-repeat;
    font: 0px/0px sans-serif;
    }

    Cuando uso tu CSS con tu width, sí me da centrado el tooltip, pero cuando pongo mis imágenes y cambio acorde con mis imágenes, me sale al empezar el texto.

    Éste es el blog: memelover.tumblr.com

    ResponderEliminar
  73. Hola Ra!,

    En Tumblr no sé cómo se pueda comportar pues nunca he probado nada ahí. Necesitaría saber exactamente en qué parte has usado el tooltip, pues aunque sí entré a tu sitio no pude hallar alguno de los tooltips al menos no con este método.

    Saludos.

    ResponderEliminar
  74. Aquí estoy, vamos a ver...

    ¿Cómo meto dentro de una tooltip una imagen en vez de texto?

    Gracias potro.

    ResponderEliminar
  75. Hola William, en la entrada se explica eso. Saludos.

    ResponderEliminar
  76. No pero yo no me refiero que al pasar el cursor por una imagen te salga un texto. Yo me refiero que al pasar el cursor por una imagen o texto te salga una imagen.

    De todas maneras ya encontré una solución googleando.

    Gracias por tu tiempo Potro.

    ResponderEliminar
  77. Buenas noches Potro.
    Potro, es posible poner estos tooltips en las imagenes de las estradas o en los mismos titulos de las entradas y que al pasar sobre ellos con el puntero aparezca el globo con el nombre de la entrada.

    Me interesa que aparezca en las imagenes de las entradas resumidas y que al pasar sobre la imagen salga el titulo de la entrada en un globo de estos.

    O tambien puede ser que al pasar sobre el titulo de la entrada salga el titulo de la entrada en uno de esos globos(esto con el fin de resumir los titulos y que al pasar sobre ellos salga el titulo completo)

    ResponderEliminar
  78. tal como lo hacen en http://www.ver-pelis.net/
    cuando se situan sobre una imagen sale informacion sobre la entrada aunque yo solo quiero que salga el titulo.

    ResponderEliminar
  79. No creo, hace algunos meses cuando modifiqué el script de Leer más (Leer más mejorado) los atributos title no funcionaban y no los pude echar a andar, si funcionaran seguro sí podría automatizarse para que se muestren los títulos de las entradas, pero temo que por ahora con estos Leer más no se podrá :(

    ResponderEliminar
  80. Potro una pregunta: el código para usar el tooltips dentro de la entrada donde lo agrego en la entrada misma? intente eso, pero se crea como un link con la URL del editor de blogger..

    ResponderEliminar
  81. Se agrega en la entrada, pero estando en la pestaña Edición de HTML y no en la de Redactar:
    http://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html

    Saludos.

    ResponderEliminar
  82. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  83. hola potro necesito ayuda,,, bueno hice todo lo que dijiste pero al poner script antes de head, no funciona el s3slider que tengo.. despues lo pegue antes del script del s3slider y funciona el s3slider pero tooltips no funciona,,,y despues lo pegue en un blog de pruebas que no tiene el s3slider y funciona perfectamente ...potro ¿que hago para que funcionen los 2? saludos...

    ResponderEliminar
  84. Hola Vendetta, mira esta entrada:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    ResponderEliminar
  85. Hola Potro.
    A ver si puedes solucionarme mi problema.Las imagenes png me salen con fondo y quiero quitarlo, he buscado en todas las respuestas de los comentarios y he probado con las soluciones que les dabas, pero en mi plantilla no estan esos codigos.
    Tambien tengo otro problema, en el menu de las paginas me sale debajo como otro menu, como puedo quitarlo??? Desde que cambio blogger solo tengo dolores de cabeza, gracias por tu ayuda.Te dejo la pagina que esta en construccion.
    http://www.malamonterostore.com/

    ResponderEliminar
    Respuestas
    1. Hola Maria Jose, no sé si ya lo has resuelto porque no veo un doble menú ni un fondo en las imágenes. Pero, si usas una plantilla del Diseñador entonces la forma de quitar los fondos es la misma.
      Saludos.

      Eliminar
  86. Hola Potro me gusta este truco pero quisiera quitarle el efecto de desvanecimiento, como lo puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola RealLink, no lo he intentado, pero edita el archivo que descargaste, ahí verás que dice:
      var animSpeed = 100;

      Cambia ese 100 por 1

      Eliminar
  87. Hola Potro, el truco lo trato de implementar en mi blog y no me sale como globo, he leido todos los comentarios, he eliminado prototype, cambio los $ y nada, siempre me sale la informacion normal sin el globo.
    la pag. salutable.blogspot.com quiero poner una informacion importante sobre todas las imagenes....Gracias amigo.

    ResponderEliminar
    Respuestas
    1. Hola Hector, ¿en cuál entrada y en cuál palabra has puesto el ToolTip?

      Eliminar
  88. Hola el potro un post genial, una pregunta: estoy intentando ponerlo en una web pero creo que necesito cambiar el primer codigo.
    Exactamente esta parte

    $('a.tTip').tinyTips('title');
    $('img.tTip').tinyTips('title');

    Me parece que no funciona por estos caracteres (&#39)
    como los paso de nuevo a html.

    Gracias y saludos.

    ResponderEliminar
    Respuestas
    1. En efecto, debes cambiar esos caracteres por comillas simples.
      Saludos.

      Eliminar
  89. Algo he debido hacer mal, si pudieras hechar un vistazo al codigo.
    Este es el original:

    < src="" width="160" height="120"style="border: 1px solid #000000;" alt="" />

    y este el que yo puse:

    < class="tTip" title="" src="" width="160" height="120"style="border: 1px solid #000000;" alt="" />

    Como veras esta en php.

    DESCRIPCION DEL JUEGO
    MINIATURA

    Tambien puedes ver el efecto en http://www.juegos-juegos-gratis.net/accion/34/play-la-noche-de-los-muertos.html

    (en la imagen que esta sola encima de los iconos de addthis.

    he tenido que quitar img en el codigo (no se podia publicar)

    Gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. No lo he probado en otras plataformas, pero sé que en otros sitios a veces el cierre de las etiquetas no es la misma, por ejemplo, aquí se puede usar así (como también lo has puesto)
      <script src='URL del archivo js' type='text/javascript'/>

      Pero lo conveniente para otras plataformas es que sea así:
      <script src='URL del archivo js' type='text/javascript'></script>

      Eliminar
  90. Muchisimas gracias el potro, ahora trabaja bien.
    Sin abusar de tu confianza en mi blog, en esta entrada puse el tooltip en la imagen en miniatura que esta debajo del juego.
    http://toptenjuegos.blogspot.com.es/2012/06/lanzamiento-de-penalty.html
    En blogger es posible aplicar el tooltip a alguna variable para aplicarlo a todas las miniaturas? como?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Nop, tienes que aplicarlo manualmente a cada imagen que quieras.
      Saludos.

      Eliminar
  91. Buenas Potro (y demás seguidores)!

    Esto es justo lo que estaba buscando. Seria posible indicar la orientación en la que aparece la ventanita? Es decir si puedo decirle que aparezca a la derecha, izquierda, arriba o abajo.

    También me gustaría saber si es posible cambiar algunos aspectos como es el tipo de le letra, color, tamaño, color de fondo, bode, forma, etc.

    Gracias por el gran trabajo que realizas con tu blog ayudando a personas como yo que no disponen de esos conocimientos para hacer lo que tienen en sus cabezitas jejeje.

    ResponderEliminar
  92. En la pagina principal no he podido utilizarlo, no se que es lo que sucede. Tienes alguna idea?

    ResponderEliminar
    Respuestas
    1. Si son sumarios no se verá, los tooltips en Blogger sólo funcionan cuando las imágenes o el texto se muestran de forma completa.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger