Tooltips con CSS en forma de burbuja

23 de marzo de 2011 82 comentarios ,
Este es otro tooltip con CSS que tiene forma de burbuja y que servirá muy bien para dar información extra sobre algún texto. No usaremos nada de scripts, sólo un par de imágenes y CSS.

Puedes ver el ejemplo pasando el cursor por las palabras que parecen enlace:
Un tooltip¡Hola! Soy un tooltip de ejemplo hecho con CSS (también llamada descripción emergente) es una herramienta de ayuda visual patentada por Microsoft el 19 de diciembre de 2002 que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Como la forma de la burbuja es una imagen podríamos editar la imagen y obtener otro color por ejemplo rosa o azul:
Un tooltip¡Hola! Soy un tooltip de ejemplo hecho con CSS (también llamada descripción emergente) es una herramienta de ayuda visual patentada por Microsoft el 19 de diciembre de 2002 que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar¡Hola! Soy un tooltip de ejemplo hecho con CSS al usuario de la finalidad del elemento sobre el que se encuentra.

Para colocar este tipo de tooltip sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:

/* Tooltip 1 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripción */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPm7Z2UUuQnE9N8J24rl52VPcHDGSXJJNnAl79wmjslQkzndzDoKH1fwdj8kzj81DrrmTObCG2UF_GT5a8jFx6vj7EC-bRqrmA9Gy3qwOCbl0H8TLuC4cBfzw_dYHC8CXKE8nzCPowkCex/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8DQJTDwsdid7g1-s2gUAlSgtJyhCwPV7wQXvPeeIQk-1Uo9uCKCiSR4yRBgrgV139XpPmvqwM4cLvrUNvBZOcbAua0Egrnsa88QCBFNdw9gWoYZa4Edv6Y52DKo0WfViQ3j5WQxCa9sh5/) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPm7Z2UUuQnE9N8J24rl52VPcHDGSXJJNnAl79wmjslQkzndzDoKH1fwdj8kzj81DrrmTObCG2UF_GT5a8jFx6vj7EC-bRqrmA9Gy3qwOCbl0H8TLuC4cBfzw_dYHC8CXKE8nzCPowkCex/) no-repeat bottom;
}

Ahora en tu entrada donde vayas a mostrar el tooltip utiliza este código:
<a href="#" class="tt">palabra con tooltip<span class="tooltip"><span class="top"></span><span class="middle">Aquí va la descripción adicional que mostraremos en el tooltip</span><span class="bottom"></span></span></a>

Y así se sencillo podemos tener un tooltip llamativo sólo con CSS.
Si quisieras el tooltip rosa entonces en lugar del primer código que hemos añadido usarás este:
/* Tooltip 2 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripción */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5an2sgn9l6YCs4nBv2iWqlRAkNcCPhOhhYVB9jLX6WNXOD9SMUE3EEdMGDnNT-ggaZPtJGnCKSng_d1rvANhgMa5BN-MAxPs1RbuGWjvURXlCZx6tMHxPbD6EgFlHDyb79kmV9kYOHX1/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaPxcdnO-bL5evFVDCB_gOvZQtXVajwDQ88Yngri_zGigcWkocIQn4WZDkHf2-cw0echUwwqnZAq7XMOPZZUNHW830M_FLJsYbSssh4LzSZZOWIB-Vbrqvpi_Mecs6QYEHjCCDx2ul_mW/) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5an2sgn9l6YCs4nBv2iWqlRAkNcCPhOhhYVB9jLX6WNXOD9SMUE3EEdMGDnNT-ggaZPtJGnCKSng_d1rvANhgMa5BN-MAxPs1RbuGWjvURXlCZx6tMHxPbD6EgFlHDyb79kmV9kYOHX1/) no-repeat bottom;
}
Y si quisieras el azul entonces el código a añadir sería este:
/* Tooltip 3 con CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Color del texto que tiene el tooltip */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Color del texto de la descripción */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPyS-JxMvGEOs-fRpAMzlgP92LzIVkQX2rqJXZiumWbAUevEy4MsytR0kDWU1ruaKz-5s66rdYN6htaz7E6upnEgq5c_ze2Unw2xxPVJSG7wbcMKZxd6214RqPkHApv7LB2_fst45sIQI/) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddQzc4Fboq62B6UX5xm6Ux2R8DTJ2znM2eJmYDUW0FuoKuj_exlovgJjvjdAnevfs_-dpgfrC9tEX2MWZyR4q1UtvO7dEwvXwNVUXVLedcayV-1nmNUV4xyubhBbr2eHGTbaYaWKPQutL/) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPyS-JxMvGEOs-fRpAMzlgP92LzIVkQX2rqJXZiumWbAUevEy4MsytR0kDWU1ruaKz-5s66rdYN6htaz7E6upnEgq5c_ze2Unw2xxPVJSG7wbcMKZxd6214RqPkHApv7LB2_fst45sIQI/) no-repeat bottom;
}
Por supuesto que en cualquiera de los tres podemos modificar el color del texto, el tipo de letra, etc.
Las burbujas como mencioné antes, son una imagen por lo que si deseas otros colores habrás que editar las imágenes y cambiarlas por las URLs que están en el primer código.


82 comentarios en:

" Tooltips con CSS en forma de burbuja "

  1. perfecto, ya lo coloco en alguna entrada :D

    ResponderEliminar
  2. Ey Potro, gracias... me has dado una idea, fantástico como siempre tu labor, gracias

    ResponderEliminar
  3. Seguro que sabrán sacarle provecho a este recurso ;)

    ResponderEliminar
  4. Si!!! AL fin algo práctica con esto. Es que hay uno que de verdad por lo menos para mi es un fastidio. Este se ve muy lindo y se puede modificar el color!

    Gracias por siempre traer algo nuevo =)

    ResponderEliminar
  5. :) muy bueno Potro umm en un ratito libre tal vez lo implemente en mi blog *)

    ResponderEliminar
  6. Gracias Potro como siempre con nuevas novedades lo necesitaba, este es un ejemplo de lo que ise en mi web Imagen1 , lo rediseñe a mi estilo opcional, y me sirvio gracias por la novedades.

    ResponderEliminar
  7. Miss Varieté, qué gusto que lo encuentres útil :)

    Beben Koben, thanks for your visit dude!

    Kron, nos cuentas qué tal te fue :)

    bU, genial! me encanta cuando cada quien le pone su toque personal :D

    ResponderEliminar
  8. De mucha utilidad.
    Gracias por compartirlo.
    Un saludo para toda la comunidad.

    ResponderEliminar
  9. Orale! me gustó, siempre he odiado la costumbre de que todo sea cuadrado, el hecho de que sea una burbuja lo hace mas singular y bonito.

    Lo incluiré en cuanto pueda.

    Gracias de antemano.

    ResponderEliminar
  10. Me gusto esto, sobre todo porque solo se usa CSS

    ResponderEliminar
  11. Qué gusto que haya sido de su agrado :)
    Saludos a todos!

    ResponderEliminar
  12. Siento molestate tanto y tan seguido, pero es que he mirado en internet cómo quitar el borde a las imagenes en blogger, y he hecho lo que decían pero en mi plantilla no encuentro lo que me ponen para buscar (he usada control+F y todas las maneras posibles, acortando al maximo la frase, por partes... y nada). Espero que me puedas ayudar.

    ResponderEliminar
  13. Javi anda a esta parte en tu plnatilla :

    .post-body img {
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    }

    Cambia las propiedades del borde

    ResponderEliminar
  14. Lo he echo, pero me sigue sliendo el borde.
    Gracias de todas formas.

    ResponderEliminar
  15. Hola Potro, si quiero que salga en todas las entradas es posible? y si es si podrías indicarme como hacerlo please... gracias como siempre Potro

    ResponderEliminar
  16. Hola Javi,

    No es ninguna molestia pero desafortunadamente no puedo orientarte sobre las publicaciones de otro blog, no porque no quiera hacerlo sino porque cada autor conoce cómo resolver los problemas que surjan con las instrucciones de sus entradas.
    Sin embargo, si me explicas a detalle cuál es el problema con tu blog con gusto te ayudo.

    Saludos.

    ResponderEliminar
  17. Hola MaG@S RaDioMuSiC,

    Claro que es posible, sólo agrega el segundo código en la entrada tantas veces como desees mostrar los tooltips.

    Saludos!

    ResponderEliminar
  18. aisss no entendí, yo me gustaría que saliese en todas la entradas en donde pone en enlace para la descarga, mi idea es poner... recomiendanos y hazte seguidor... :D

    ResponderEliminar
  19. Es del mismo modo, sigue las indicaciones del post y en el código que dice que se pone en las entradas ese es el que usarás en tu entrada, ahí puedes poner el enlace de la descarga (o cualquier enlace) sólo quitando el signo de gato # y poniendo en su lugar la URL.
    Haz la prueba primero, y donde te quedes atorado me dices para saber exactamente cuál es la parte que no está clara.

    Saludos.

    ResponderEliminar
  20. HOla potro ,tienes razon no seria bueno ni correcto copiar exactamente el mismo diseño ,pero no estaria mal meterle de otras webs y hacer una combinacion,ya quite todos los problemas que tenia pero lapregunta que tengo ahorita es ¿Se pueden poner mis post como los de estas pagina?
    http://eienfansub.com/ Nose ,si se pueda,creo que escomo una pizarra de fondo que esta formada por varias imagenes http://www.eienfansub.com/wp-content/themes/eienv1/images/title-separator.png ;http://www.eienfansub.com/wp-content/themes/eienv1/images/entry-top.jpg;http://www.eienfansub.com/wp-content/themes/eienv1/images/entry-bottom-bg.jpg
    Tengo la idea pero no se como desarrollarla como pondria ese tipo de pizarra o cartel de los post de ellos,asi en los mios?Habra algun modo,gracias potro saludos:)
    http://toditonarutoshippuden.blogspot.com

    ResponderEliminar
  21. Pues en mi blog salen bordes blancos en las imagines de las entradas o de las paginas y no consigo quitar ese borde.

    ResponderEliminar
  22. mexico, no es tan sencillo como parece porque habría que cambiar la estructura del blog para poder dividir el área de las entradas en tres partes. Hay una versión de esa plantilla para Blogger pero no recuerdo cómo se llama, la estuve buscando durante 40mins y no di con ella aunque ya alguna vez la descargué pues en su momento consideré usarla. Pero bueno, a lo que voy es que sería mejor que usaras esa plantilla para tener las entradas de esa manera, pues modificando la plantilla actual sería todo un lío y posiblemente no obtengas los resultados esperados.

    ResponderEliminar
  23. Javi, busca en tu plantilla este código y elimínalo:

    .post-body img {
    padding: 8px;
    background: $(image.background.color);
    border: 1px solid $(image.border.color);

    -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
    box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

    -moz-border-radius: $(image.border.radius);
    -webkit-border-radius: $(image.border.radius);
    border-radius: $(image.border.radius);
    }

    ResponderEliminar
  24. hola potro te queria pedir un favorsote . es el siguiente aa quel dia estuve revisando toda la pagina y me pare aver encontrado un tutorial de como colocar varios viveos con pestañas en una entrada. y ya no lo encuentro y me gustaria que me dieas el link del post eres tan amable aa y otra cosa me puedes pasar el link de como colokar una imagen antes de ver cada video gracias eres muy amable y espero me ayudes en eso ^^

    ResponderEliminar
  25. que tal potro como estas salu2
    mira sabes como poner una linea en mitad del post y comentarios para que no se vean pegados los dos gracias.

    ResponderEliminar
  26. hola potro
    como le ago para poner las palabras con movimientos como las que tienes arriba de los anunciantes (rotativo,seduccion)que dice bienvenido a ciudad blogger si es la primera vez.....

    ResponderEliminar
  27. Hola Ero-k'rlox,

    Probablemente lo viste en otro blog porque no tengo ninguna entrada así. Pero en Vagabundia hay un post para hacer un tipo galería de videos:
    http://vagabundia.blogspot.com/2009/10/incrustar-multiples-videos-de-youtube.html

    Saludos.

    ResponderEliminar
  28. Hola Daniel, ¿me podrías dar un ejemplo más detallado?

    Hola admin, mira esta entrada, ahí se explica cómo se hace.

    ResponderEliminar
  29. hola potro una pregunta como coloco estos dos botones de siguenos en facebook y twitter arriba en el blog asi como en esta pagina
    http://narutoshippudenspain.blogspot.com/2010/03/contacto.html#

    ResponderEliminar
  30. Con un simple código de imagen con enlace colocado debajo de <header>

    Es decir:
    <a href="URL del enlace"><img src="URL de la imagen"/></a>

    ResponderEliminar
  31. Potro ya me manejo a las mil maravillas con Winrar he probado con el Zoom y Shadobox, me gustaria que me ayudeses con el codigo de imagenes de Shadobox incluyendo las miniaturas porfi¡¡¡

    ResponderEliminar
  32. ee potro eres un teso para todo esto me quedo perfecto y tan sencillo que es solo otra cosita no sabes como lo centro gracias

    ResponderEliminar
  33. Javier, no sé cuál problema tengas con Shadowbox pero el que sea vamos a verlo en esa entrada ;)

    Ero-k'rlox, mira esta entrada.

    ResponderEliminar
  34. Hola Potro, hace tiempo que te quería preguntar pero no sabia en donde así que como veo deshabilitado la opción de Contacto, te pregunto esto fuera del tema si no es molestía. Sabes como hacer Esto en que las imágenes cambian en la plantilla de muestra para agregarlo en un blog que tengo, o de lo contrarío algo similar¿?...

    Saludos y disculpa pero estoy en la calle con eso!

    ResponderEliminar
  35. Esta semana preparo un post sobre ello pues ya tiene mucho tiempo que me han pedido ese slider y siempre lo pospongo, así que en breve lo publicaré ;)

    ResponderEliminar
  36. hola potro gracias, potro queria pedirte que si tu sabes como colocar varios videos en una entrada con varias opciones de video aki me expliko un poco mejor en la imagen https://lh6.googleusercontent.com/--2ao2OEVwk0/TY69-Mqn35I/AAAAAAAAAQE/nm1OcqThJWI/s320/A.png

    ResponderEliminar
  37. No, pero como te mencioné unos comentarios atrás puedes probar con la opción de Vagabundia.

    ResponderEliminar
  38. claro mira esta imagen quisiera ponerlo así
    VE ESTA IMAGEN http://dl.dropbox.com/u/17424104/Dibujo.PNG

    ResponderEliminar
  39. Espero con ansias el post, otra cosa si no paso de conchudo estaría bueno también un slider de tira de imágenes pero en miniatura como 50x50 o 100x100 que pasen solas y que tengan enlaces.

    Te acuerdas como poner diferentes fondos (colores) al blog en cada página o post ¿? yo lo tenía pero ya me olvide como era... algo más+++ no mentira ya no sigo o si no vas a tener que poner una página de pedidos (asesoría gratuita) jeje.

    Saludos y gracias por responder rápidamente.

    ResponderEliminar
  40. aH! Potro no se si es sólo mía la falla pero cuando voy al botón de compartir de Twitter la letra está superpuesta al botón sin influir en el pero lo digo por avisarte nomas...

    ResponderEliminar
  41. man algo que no va al tema en mi web la estadisticas que trae el blogg osea el gaget que dice paginas vistas en total desde que compre el dominio .net no funciona tienes alguna respuesta =D =D =D

    ResponderEliminar
  42. WOW te quedó súper¡¡
    Potro, disculpa que te pregunte por acá, pero no veo en "imágenes" el ítem de mi interés. Colabórame por fa en lo de cambiar el nombre (propiedades) a las imágenes que uno usa en el blog, para que cuando se busquen imágenes desde google aparezca la imagen y redireccione al blog.
    Gracias lindo
    Soraya

    ResponderEliminar
  43. Potro una pregunta distinta al tema, no va referido a los tooltips que por cierto, voy a ver si ahora mas adelante lo agrego en mi blog :D jeje... Mi pregunta es... como hago para ponerle algun signo en las etiquetas...[SIN QUE SEA UN ICONO,O UNA IMAGEN, SOLAMENTE UN SIGNO, ESCRITO CON EL TECLADO] asi como tu lo tienes en donde dicen ARTICULOS MAS VISITADOS y BLOGS DE AYUDA.

    ResponderEliminar
  44. Daniel,

    Gracias por el ejemplo :)
    Prueba poniendo en tu plantilla esto:

    .post-footer-line post-footer-line-3 {
    border-bottom:2px solid #000;
    padding-bottom:15px;
    }

    ResponderEliminar
  45. Daniel, parece que andan fallando esos botones, desde ayer lo noté aquí y en un par de blogs más. Gracias por el aviso de cualquier forma ;)

    ResponderEliminar
  46. hola potro queria que me explicaras sobre un problema que tengo con adsense es que me llego un mensaje que dice "Cuenta de Google AdSense inhabilitada" eso significa que ya perdi my cuenta o la puedo recuperar, si la perdi me puedo crear otra cuenta o espero aver si me la habilitan o tu dices que ya me lsa serraron total mente

    ResponderEliminar
  47. Hola potro tu eres genial no teng un blog presisamente pero miren mi web http://www.todosobreelmanesgerman.co.cc/ esta la hize ya que en mi pais colombia a una serie y publique ay todo sobre el programa entren!!!

    ResponderEliminar
  48. http://WwW.DistritoUrbano.NeT, no tengo idea, quizá es temporal o quizá necesites quitar el gadget y ponerlo de nuevo, la verdad es que de ese gadget no sé mucho.

    ResponderEliminar
  49. Hola Soraya,

    Para ayudar a posicionar las imágenes en Google es importante que el nombre del archivo (de la imagen) sea el mismo que el que corresponde, es decir, en lugar de que la imagen se llame así:
    SSN001.jpg

    Que se llame así (suponiendo que la imagen sea una flor):
    flores_blancas.jpg

    Además el código de la imagen debe contener el atributo title y alt, por ejemplo:

    <img src=URL de la imagen" alt="Nombre de la imagen" title="Nombre de la imagen" />

    ResponderEliminar
  50. - [F]asteN [M]ovieS -, pues de hecho eso que yo tengo es un icono (imagen) y los he puesto así.


    Ero-k'rlox, te la han cerrado totalmente y con ese correo no podrás abrir otra.

    ResponderEliminar
  51. potro disculpa exactamente en donde lo denería colocar

    ResponderEliminar
  52. En los estilos de la plantilla. Todos los estilos van antes de ]]></b:skin>

    ResponderEliminar
  53. Hola Potro, te quería preguntar como puedo separar la imagen (icono del cubo mágico) de el titulo de la entrada mira el Sitio para que entiendas.

    Saludos ;)

    ResponderEliminar
  54. Hola Pirez,

    En esta parte se controla la separación:
    .post-title {
    padding-left: 20px;

    ResponderEliminar
  55. Te busqué en FB pero no te encuentro entonces te aviso aqui. Si recibes algo de rh.emilio es de mi parte, ok?
    saluditos y gracias.

    ResponderEliminar
  56. Ahh lo que sucede es que hoy borré mi cuenta de Facebook por eso ya no me encontraste.
    Muchas gracias por el donativo, te lo agradezco de corazón :)
    ¡Saludos!

    ResponderEliminar
  57. Hola potro, buenos días, no funcionan los tooltips en mi blog (www.vetantirrabica.blogspot.com), he puesto los códigos donde se menciona y no pasa nada.

    Todas las palabras del siguiente código se muestran seguidas.
    a class="tooltip" Pasa el cursor aquí span Este es el mensaje que se mostrará al pasar el cursor. span a

    Gracias por tu respuesta.

    ResponderEliminar
  58. Hola FUMISPORE, no veo que tengas puesto el código en tu blog.

    ResponderEliminar
  59. Me ha gustado mucho esta entrada y ya la he puesto, Gracias amigo y un saludo

    ResponderEliminar
  60. hola Potro, enhorabuena por tu blog, es muy interesante!!

    he intentado adaptar tu entrada a mi blog pero ocurre que las burbujas de texto se ven bien pero me han desaparecido los gadgets de la columna lateral; podrías ayudarme? esta es mi entrada:

    http://www.labitacoradepedrin.com/2011/10/transpirenaica-con-alforjas-i.html

    un saludo y muchas gracias por tu tiempo.

    ResponderEliminar
  61. Hola Pedro,

    El problema no son los tooltips, sino que en tu entrada faltan unos cierres en unos códigos y por eso se cae la sidebar. Parece que lo que falta es el cierre de uno o dos DIV, así que prueba agregando al final de "encontré por casualidad." uno o dos </div>

    Dale Vista Previa hasta que veas que la sidebar se coloca de nuevo en su lugar.
    Saludos.

    ResponderEliminar
  62. hola de nuevo Potro:

    tenías toda la razón, he incluido un bloque de cierre DIV a continuación de "encontré por casualidad" y ahora puedo ver los gadgets. Pero ha surgido un problema nuevo: la parte de la burbuja que aparece sobre la barra lateral parece como si estuviera 'por debajo' de ésta, mientras que la parte de la burbuja que queda sobre la entrada se visualiza perfectamente. Qué puedo hacer? Está relacionado con el z-index?
    saludos y gracias de nuevo por tu tiempo!

    ResponderEliminar
  63. Puede ser por el z-index o por el navegador, porque de hecho en Chrome al menos ahora se ven bien los tres al pasar el cursor sobre de ellos.

    ResponderEliminar
  64. hola Potro,
    he probado con distintos valores de z-index en el código que tú publicas pero el resultado es el mismo; si es cosa del navegador, hay algo que pueda hacerse? Ahora estoy recordando que descargué el gif de la burbuja y del filler para hacerlo más ancho y lo alojé en picasa, puede influir este alojamiento?
    gracias de nuevo!

    ResponderEliminar
  65. No es el index-z, pues como te digo, en donde lo he probado se ve bien, encima de toda la sidebar. Lo he probado en Chrome 14, y Firefox 7, en ambos la burbuja se ve completa sin nada que se le encime. Saludos.

    ResponderEliminar
  66. hola Potro, pues si en IE no se ve bien, tendré que pensar en otra cosa... Supongo que la mayoría de la gente aún usa IE y prefiero que todo el mundo vea bien las burbujas, asi que de momento me doy por vencido.
    Te agradezco de verdad las rápidas respuestas a mis dudas. Un cordial saludo!

    ResponderEliminar
  67. Hola Potro,

    una molestia, soy nuevo y quería saber si sería posible poner los tooltips en los títulos de las entradas porque estoy haciendo un blog en el que el minimalismo abunda y apliqué lo de entradas resumidas estolo magazine 3 y como no tienen descripción (y no quiero que tengan) pues quisiera aplicar ahora esta gran solución tuya.

    Gracias y saludos!

    ResponderEliminar
  68. Pedro Pardo, entonces es la compatibilidad de la plantilla con IE, también algo parecido pasa con los menús de subpestañas, cuando se aplica el truco para que funcionen esos menús funciona en todos, pero en IE se sobrepone también el contenedor. Hay varios detalles como ese en los que en IE se sobreponen los contenedores con esas plantillas.

    ResponderEliminar
  69. Leonardo, me temo que no pues habría un conflicto con los estilos. Deja ver si después con un poco de tiempo hago un experimento y ver si funcionan los tooltips en los títulos. Saludos!

    ResponderEliminar
  70. Si, eso de los tooltips sería muy bueno en los títulos cuando se muestra sólo el título y una imagen en la página principal.

    Excelente blog y muchas gracias Potro!!

    ResponderEliminar
  71. hola potro quisiera saber si este efecto se puede poner en una imagen

    ResponderEliminar
  72. Sí Cronos_2012, justo antes de la descripción agrega el código de la imagen:

    <img src="URL de la imagen"/>

    ResponderEliminar
  73. una pregunta se puede usar este efecto con carrucel de marquee yo la puse y no seve el texto podrias verlo y opinar esta es la url http://animemp4movil2012.blogspot.com/

    ResponderEliminar
  74. Me temo que dentro de los MARQUEE no funciona :(

    ResponderEliminar
  75. che Potro como hago si quiero poner un enlace dentro de la burbuja? Resp :D Gracias

    ResponderEliminar
    Respuestas
    1. De igual forma Ivo, sólo agrega el enlace dentro del texto de la forma como lo harías normalmente:
      <a href="URL del enlace">Texto</a>

      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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger