Tooltips con CSS

28 de julio de 2010 131 comentarios ,
Los tooltips son descripciones emergentes que ayudan a dar un mejor entendimiento sobre el contenido que se lee. Algo muy parecido en HTML es el atributo title que hace lo mismo, muestra una descripción de un enlace, una palabra o una imagen, por ejemplo este texto.

Los tooltips son y hacen lo mismo que el atributo title pero a diferencia de éstos últimos se pueden personalizar la forma, el color de fondo, el texto, etc.
Hay muchas maneras de ponerlos, y por la red abundan muchos scripts que incluso pueden darle algún efecto adicional.
En este primer caso vamos a ver cómo crear tooltips usando sólo CSS sin nada de Javascript para no hacer la página más lenta y pesada.
Puedes ver el resultado pasando el cursor aquíEste es un tooltip hecho sólo con CSS. El mensaje se mostrará sólo al pasar el cursor y desaparecerá al quitar el cursor de encima..

El método es muy simple, fácil de hacer y personalizable, sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> pegas lo siguiente:
a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}

Y ahora siempre que quieras usar un tooltip usa este código dentro de tus entradas:
<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>

En el código sólo hay tres cosas a tomar en cuenta, lo que está en negrita siempre se debe poner para que aparezcan los estilos del tooltip; lo que está en azul es el texto al que se le pasará el cursor encima; y lo que está en color rojo es la descripción.


131 comentarios en:

" Tooltips con CSS "

  1. Muy buena herramienta, la tendré en cuenta.

    ResponderEliminar
  2. Excelente potro :)

    "Y el Potro lo iso otra vez!!!" jajajaja

    Saludos men gracias :D

    ResponderEliminar
  3. Jajajaja, el fin de semana vi ese programa y me mataba de risa cuando lo escuché :P

    ResponderEliminar
  4. gracias potro, como se podria hacer con las pestañas del navedor por ejemplo tu pagina pasa el cursor sobre la pestana y sale la entrada y el nombre de tu blog

    ResponderEliminar
  5. Esa es una característica del navegador así que ahí no tenemos manera de modificarlo.

    ResponderEliminar
  6. Grande Potro!!!
    Lo que te había pedido la otra vez, pero el blog que me pasaste se me complico por que se lo quise aplicar a las imágenes y no pude, pero al texto si jejeje

    Saludos compañero!!!

    ResponderEliminar
  7. Tio, esto es genial, por cierto, ahora tienes 985 seguidores...
    Cuando llegues a 1000 haz una fiesta e innvitanos, ¿vale?
    :D

    Aunque a este ritmo para antes de que acabes la semana ya estas... O.o

    ResponderEliminar
  8. Muy buen truco.
    Ya me servira cuando escriba una palabra que mis lectores no entiendan.

    Saludos.

    ResponderEliminar
  9. Pozo+10™, espero y este no se te haya complicado :)

    Drawer 4 Everyone, jaja, no estaría mal, qué lástima que todos estamos distribuidos por todo el mundo, sino sí hacía algo =)

    Vku, gracias men, qué bueno que te gustó!

    Dankey, sí, básicamente esa es la función principal de los tooltips, seguro la ocuparás en algún momento.

    ResponderEliminar
  10. olle potro que buena ayuda nos as dado a cada uno de nosotros, ¿podrías (claro si tu quieres) promocionar mi blog?

    ResponderEliminar
  11. QEU GENIAL FELICIDADES, Y SI QUIERO AGREGAR UNA IMAGEN CON LINK EN LUGAR DEL MENSAJE DE TEXTO?

    ResponderEliminar
  12. Hola

    Esta es mi segunda consulta directa. He buscado en este blog la manera de suprimir una entrada en mi blog y no encuentro algún post al respecto. Lo que sucede es que en algún momento publiqué una entrada misma que envié en un link vía mail. Después tuve que suprimirla, lo hice directamente en administración de entradas. Ahora, no aparece en mi blog por ningún lado, pero las personas que conservan ese link siguen viendo la entrada que según yo había borrado. ¿Cómo le hago para eliminarla definitivamente de la red?

    Saludos

    ResponderEliminar
  13. JuanBnna, lo siento, no puedo hacerlo :(

    nEjO, entonces en la parte del texto que se mostraría pon el código de una imagen, pero no te funcionará del todo bien, pues recuerda que el mensaje se quitar al quitar el cursor así que el usuario nunca podría dar click sobre su enlace. Para eso hay otros tipos de tooltips con Javascript que pueden hacerlo, pero este no.

    Blogtometría, si ya la eliminaste entonces ya se debió eliminar de la red, es posible que ellos puedan verla sólo por correo pero en la red ya no. Una página borrada conserva un caché y la página se puede ver a través de ese caché pero dura pocos días, al poco tiempo deja de verse por completo.

    ResponderEliminar
  14. Se puede aplicar a imagenes?.
    Gracias por existir e iluminar nuestros blogs con tus consejos.
    Un saludo

    ResponderEliminar
  15. ...traigo
    sangre
    de
    la
    tarde
    herida
    en
    la
    mano
    y
    una
    vela
    de
    mi
    corazón
    para
    invitarte
    y
    darte
    este
    alma
    que
    viene
    para
    compartir
    contigo
    tu
    bello
    blog
    con
    un
    ramillete
    de
    oro
    y
    claveles
    dentro...


    desde mis
    HORAS ROTAS
    Y AULA DE PAZ


    TE SIGO TU BLOG




    CON saludos de la luna al
    reflejarse en el mar de la
    poesía...


    AFECTUOSAMENTE
    CIUDAD BLOGGER

    ESPERO SEAN DE VUESTRO AGRADO EL POST POETIZADO DEL FANTASMA DE LA OPERA, BLADE RUUNER Y CHOCOLATE.

    José
    Ramón...

    ResponderEliminar
  16. Hola Potro,

    Nos podrías dar el código del gadget que tienes en la sidebar: Elige como estar más cerca de la ciudad

    Gracias!!

    ResponderEliminar
  17. Hola ELFARFULLI,

    Por supuesto, sólo cambia el texto en color azul por el código de la imagen a la que le quieres aplicar el tooltip, quedaría así:

    <a class="tooltip"><img src="URL de la imagen" />
    <span>Este es el mensaje se mostrará al pasar el cursor.</span></a>

    Saludos.

    ResponderEliminar
  18. José Ramón, muy bello el poema, muchas gracias =)


    Javierlota, claro, el menú que uso es este.

    ResponderEliminar
  19. olle portro como puedo aser para que visiten mi blog?

    ResponderEliminar
  20. Publicando seguido y con mucha paciencia. Si publicas contenido de calidad verás que con el tiempo te llegarán visitas.

    ResponderEliminar
  21. Gracias Ciudad!
    Tenia pensando aplicarlo con CSS, me resulta muy util,
    Un cordial saludo.

    ResponderEliminar
  22. Che potro,me darias alguna sugerencia para publicar mi blog en un directorio y aumentar las visitas de 5 por dia :( A MAS??

    ResponderEliminar
  23. Adrián J. Messina, gracias a ti por tu visita ;)

    Datos Del Blog , mira esta entrada de Cyberbloggero, ahí tiene los mejores directorios.

    ResponderEliminar
  24. Potro <333 otro genial aporte O: se ve muy interesante *-*
    pues yo venia a molestarte u___u es que realemnte necesito ayuda xDDDDD he intentado de todas las maneras posibles pero mi propia creacion no me deja xDDD

    Pues diseñe un nuevo layout para mi blog y resulta que no puedo configurar la segunda sidebar (right) para que los widget esten enmarcados por separado T__T he intentado todo lo que se me ocurria DDD:! mis neuronas de 17 estan lelas xD

    ojala tengas alguna solucion ;_;
    si quieres criticar mi diseño seria un honor *----* xDDDD

    besos Potro <3
    tu admiradora LOL xDDDDDDDDDDDDDDDDD

    ResponderEliminar
  25. Hola Potro, que tal???
    Una consulta. En mi blog, las imágenes png, osea sin fondo, en los posts se ven con fondo blanco. Es por la plantilla o se puede modificar???

    ResponderEliminar
  26. Disculpa potro xDDD me olvide de poner la direccion de blog S:

    http://miraiparadiseyunjae.blogspot.com

    nos vemos <3

    ResponderEliminar
  27. Hola Mirai,

    Prueba poniendo antes de ]]></b:skin> esto:

    .sidebar-right .widget {
    border:1px solid #000;
    }

    Dale vista previa y mira si los gadgets quedan enmarcados por separado.
    De tu blog ya sabes que me gusta mucho el diseño =)

    Besos preciosa!

    ResponderEliminar
  28. Pozo+10™, ¿en cuál blog?


    Javierlota, gracias a ti por tu visita.

    ResponderEliminar
  29. gracias potro!!! *---* si fuera mayor me casaria contigo xDDD pero yo no poder u_u xDDDDD

    eso exactamente no me funciono pero me hiciste dar otra idea xDDD, no se cual sea exactamente el problema de no poder separar todo el "Sidebar- right" e___è pero por lo menos separe el interior de los widget @_@

    me quedo asi Dx!

    /* SIDEBAR(S) */

    .sidebaradbox {
    margin-top: 5px;
    text-align:center;
    }

    .ad125 {
    margin: 10px;
    }


    .sidebar {
    margin: 0 0 10px 0;
    color: #747360;
    }

    .sidebar-right {
    width: 200px;
    background: #d32d4c;
    border:15px solid #696966;
    padding-left: 10px;
    padding-right: 10px;
    margin:0 0 1.0em;

    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    }


    .sidebar-right .widget {
    border:0px solid #000;
    background: #3a3a38;
    margin:0 0 1.5em;
    padding:0 0 1.5em;

    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;

    }

    .sidebar-left .widget {
    border:0px solid #000;
    background: #3a3a38;
    margin:0 0 1.5em;
    padding:0 0 1.5em;

    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;

    }




    .sidebar-left {
    background: #d32d4c;
    border:5px solid #d32d4c;
    padding-left: 2px;
    padding-right: 2px;
    margin:0 0 1.0em;
    font-weight:normal;
    text-decoration: none;
    font-size: 11px;

    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    }


    .sidebar a {
    text-decoration: none;
    color: #ffffff;
    }



    todavia no encuentro el problema potro ;___;

    ResponderEliminar
  30. Qué linda, si tuvieras la edad con gusto te lo pediría =)

    Ahora me queda una duda, sino era enmarcarlos ¿a qué te refieres exactamente con "separar"?
    Es decir, ¿quieres que sea como se aplicó a las dos sidebar pero que sea sólo en la derecha y la izquierda no? ¿o se trata de otra cosa?

    ResponderEliminar
  31. *oficialmente se casa con el potro xDDDDDDDDDDDDDDDDDDDD*

    Bueno la verdad es que no se si me explique bien al principio O: lo unico que queria era que solo la "sidebar-right" estubiera enmarcada al igual que las entradas y que la "sidebar-left" solo quedara tal cual esta ahora.
    De ninguna de las dos maneras que intente funciono y ya no se me ocurre nada e___è pero no importa xD quedo bien asi como esta aunque no lo hubiera planeado 8DDDD


    Muchisimas gracias >w< todo mi blog te lo debo a ti xDD

    ResponderEliminar
  32. Oye potro esque quiero poner un banner arriba de los post pero quiero que nomas aparezca en la pagina principal y que al entrar a una entrada desaparesca que codigo puedo colocar?

    vi en unos de tus comentarios que decias que coloquemos un codigo para poner algun elemento y que al accesar a la entrada este aparesca:



    (yo lo quiero hacer pero al reves que el elemento aparesca en la pagina principal y al entrar a cualquier entrada desaparesca, le are?)

    una ultima cosa algun tutorial para aprender a manejar el codigo de blogger y css porque hay algunos codigos que no se ni para que sirve xd

    ResponderEliminar
  33. Mirai, la verdad es que así como ha quedado tu plantilla la veo muy linda :)


    Luis, mira esta entrada. Respecto a los demás códigos, sino sabes para qué son es mejor no tocarlos, a veces quitar algo que no sabemos qué es puede resultar desastroso.

    ResponderEliminar
  34. muchas grasias potro me sirvio de maravilla graxxx man =)

    ResponderEliminar
  35. Qué tal, Potro!
    ¡Wao, 1,000 ciudadanos y continúa la cuenta...! Felicidades! Eso demuestra la calidad de este blog. Sigue así.
    En cuanto a esto de los tooltips, valió la pena la espera. Si recuerdas, hace como una semana te escribí pidiéndote nos enseñaras cómo hacer algo así, y prometiste publicar un post al respecto más adelante. Bueno, promesa cumplida de tu parte. Gracias. Voy de una vez a usarlo en mi blog.
    Como yo no sé nada en cuanto a las características de esos lenguajes java, css, etc., tengo una preguntita: este tooltip, hecho en base a css, ¿puede ser visto sin problema por cualquier visitante de un blog, sin importar cuál sea el navegador que usen?
    Muchas gracias por todo y sigue adelante!
    Seguro que antes de que acabe el año, ya llegas a los 2,000 ciudadanos. (No se si la plataforma blogger resista tanta multitud, ja, ja, ja!).
    Saludos!

    ResponderEliminar
  36. La verdad que este es mas simple pero igual se ve muy profesionál en un blog de Blogger. Ademas, siempre las ventajas del CSS están presentes. A mi parecer no tiene nada que envidiarle al que acabas de publicar.

    Un abrazo!!!

    ResponderEliminar
  37. Vicky, claro, debe poder visualizarse en todos los navegadores sin problema alguno. Gracias por esperar y por tus comentarios siempre tan amables :)

    bro, coincido contigo, con un poco de talento se puede personalizar el tooltip de manera que quede como si fuera mejor que con una librería y sobre todo no hará nada pesado el blog.

    ResponderEliminar
  38. Hola, Potro! Gracias por la aclaración.
    Ahora que puse este truco en uno de mis blogs y también en otro blog de pruebas, resulta que me funciona; pero a la vez, no me es funcional. Me explico.
    Cuando utilizo los códigos para el tooltip en una entrada (poniéndo en modo html, obviamente) y luego publico desde ese modo, directamene, no hay ningún problema y sale perfecto.
    Pero el problema es que si pongo el tooltip en modo html y luego paso al modo redactar, para, por ejemplo, continuar redactando la entrada, o también si trabajo sobre entradas ya publicadas, entonces me sucede que el código me arroja siempre el mismo error y se cambia el tooltip que ya tenía escrito y entonces queda mal.
    Y sin importar cuántas veces lo haga, siempre me sucede igual, y aún en blogs diferentes. ¿Me podrías ayudar, por favor? Fíjate, por favor, para que veas los dos ejemplos:
    Cuando me sale bien:
    http://masdelatierra.blogspot.com/2010/08/prueba-de-tooltips.html
    Cuando me sale mal:
    http://masdelatierra.blogspot.com/2010/08/prueba-de-tooltips-mal.html
    De antemano, muchas gracias por tu ayuda.

    ResponderEliminar
  39. Hola Vicky,

    Desconozco por qué te suceda eso, en sí no debería haber ningún problema si pasas a la pestaña Redactar, al menos yo lo he hecho tanto en este blog como en uno de pruebas y no tuve problemas con ello o.O

    ResponderEliminar
  40. Bueno, es un poco extraño eso que me pasa. Me sucede en plantillas clásicas de blogger. No he probado con otras plantillas.
    De todas formas, muchísimas gracias por tratar de ayudarme. Porfa, si después te llegaras a enterar de cómo solucionar eso, te agradecería enormemente si me avisaras(y perdona la molestia).
    Saludos!

    ResponderEliminar
  41. Pues bueno, después de hacer otras pruebas más descubrí que esto sólo sucede con el editor actualizado, por alguna razón rompe las etiquetas de span y es por eso que no sale el tooltip.
    Sólo veo dos formas de solucionarlo, una es que edites el contenido desde Redactar y ya que tengas todo listo sólo agregas los tooltips desde Edición de HTML para que ya no tengas que regresar a la pestaña Redactar.

    La otra es regresar al editor anterior y con ese no tendrás ese problema sin importar si estás en Redactar o Edición de HTML.

    Saludos!

    ResponderEliminar
  42. Qué tal, Potro!
    Bueno, gracias por haber seguido investigando. Qué bueno que tiene solución este asunto de los tooltips. Solo que tendré que tratarlos como al comer pescado: con mucho cuidado (ja, ja!).
    Gracias por toda tu ayuda y tu contínua disposición a darnos siempre la mano.
    Saludos!

    ResponderEliminar
  43. Hola, Potro!! Este post es una maravilla, sé ke este tipo de cosas existen pero sólo sé ke pueden hacerse fácilmente hasta ke tú las publicas, más ke genial!!

    Tengo una petición, (¿Cuándo no???) =(. Tienes un post donde enseñas cómo subrayar y hacer ke los links cambien a diferentes colores mientras el cursor está sobre ellos, ese lo apliké cuando lo publicaste y lo amo, por cierto =), pero ahora kisiera ke me des el tip para subrayar los links solamente cuando kiero aplicar estos tooltips en una entrada. Ayyyy perdón por molestrte de nuevo, pero eres mi única salvación!!!

    Mil gracias de antemano como siempre, eres un lindo =)

    ResponderEliminar
  44. Hola Merlina,

    Nunca es molestia ;)
    No he entendido muy bien. Si te refieres a subrayar el texto del tooltip sí se puede, el problema es que también se subraya el contenido del tooltip :\

    ResponderEliminar
  45. =( Kería saber como haces tú para subrayar los textos, como por ejemplo en este post, donde pones pasando el cursor aquí, para aplicarlo en el tooltip, pero si es todo un rollo hacerlo, lo dejaré así =P

    Mil gracias de nuevo por tomarte el tiempo para responder!! Como siempre, eres un lindo. Besitos!!! =)

    ResponderEliminar
  46. Ah pues justo en la entrada que mencionas sobre cómo personalizar los enlaces se explica cómo ponerle el subrayado, sólo es buscar donde dice:
    a:link {

    Y poner debajo:
    text-decoration: underline;

    Con eso los enlaces del blog estarán subrayados.
    Si quisieres que sólo algunas cosas estén subrayadas y no todas entonces puedes encerrar el texto que quieres subrayar entre <u> y </u> y con eso quedará subrayada la palabra que deseas.

    ¡Besos!

    ResponderEliminar
  47. Potro quisiera saber porque cuando coloco todo como habeis puesto arriba, al probar, funciona bien pero las ventanitas que aparecen con la descripcion aparecen siempre en un mismo lugar y no con las palabras en la que se aplico, y cuando voy bajando la pagina pues ya no se ven las descripciones porque se quedaron arriba. Si no me epxlico bien, puedes ver como quedo, www.funse.blogspot.com has click en leer mas y las plabras resaltadas o en negritas esas son las que tienen los tooltips

    ResponderEliminar
  48. Debe ser por algún estilo que has modificado en tu plantilla. Yo lo he probado con las plantillas nuevas de Blogger y me ha funcionado sin ningún problema.

    ResponderEliminar
  49. Perfecto!!! Ya kedó!!! Mil gracias, por responder y por la súper ayuda.

    Besito x 1000!!! =)

    P.D. Eres un lindo!!

    ResponderEliminar
  50. Potro me respondistes el comentario que hice o el de Merlina, solo para saber, porque no entiendo lo de haber modificado algun estilo, púes lo he colocado tal cual, y no movi nada. Espero me puedas ayudar por favor, acá esta la dirección del blog, para que veas como ha quedado http://funse.blogspot.com/ esta en la parte de la introducción al blog, en las letras que estan en negritas, el problema es que la ventanita emergente o tooltips siempre aparece en la misma posición y mientras uno va bajando la pagina ellas siguen aparecioendo en la misma posicion, asi que si la palabra en la que se le aplico el tooltips esta en la parte final de la entrada no se ve la descripción porque la ventanita emergente sigue apareciendo arriba. Si alguna persona le sucede lo mismo por favor comenten. Muchas gracias por tus aportes proto

    ResponderEliminar
  51. Te respondí el tuyo. Me refiero a que algún cambio que hayas hecho en la plantilla pudo haber afectado la forma que se muestran los tooltips.
    Esto es porque probé ponerlos usando la misma plantilla que usas y funcionaron sin problema, así que algún otro cambio que hayas hecho antes a la plantilla puede ser el causante de que se muestren así.

    ResponderEliminar
  52. A muy bien gracias amigo, pues la verdad no sé que cambio podria estar afectando la aplicación del tooltips, pero deber haber alguna solucion, quizas otro tipo de tooltips que no de este problema, o si te envio la plantilla y la revisas ¿podrias ayudarme a identificar el problema?? esas explicaciones adjuntas a cualquier palabras o imagen me serian util para poder exponer mejor las clases a los alumnos, agradesco mucho tu apoyo potro, y gracias por tus prontas respuestas.

    ResponderEliminar
  53. Pues podrías probar con el tooltip hecho con jQuery:
    http://ciudadblogger.com/2010/08/tooltips-con-jquery.html

    ResponderEliminar
  54. =( Hola, regreso a la interminable molestia =( Pensé ke ya me había kedado perfecto este aditamento pero resulta ke ahora ke lo publico, a la hora de poner el código de pasa el cursor aki, etc., etc., aparece en la entrada pero 1) sale cortado, 2) me aparece en forma de link, en el código me aparece www.blogger.com =S sin ke yo lo ponga, y a la hora de poner el cursor en la palabra, si le aprietan, los manda a una página inexistente. Kité los códigos ke me diste anteriormente para poder subrayar , pensando ke eso era lo ke estaba mal, pero no es eso =( algo estoy haciendo mal o es más bien algún código anterior ke está interfiriendo??? Perdón por molestarte, ojalá puedas ayudarme, (como siempre, ps porke eres un lindo) Gracias por adelantado =)

    ResponderEliminar
  55. Seguramente después de poner el tooltip has entrado a la pestaña Redactar. Cuando eso sucede suele agregarse la URL para editar la entrada y seguro que es ese el enlace de Blogger que mencionas.
    La recomendación es que escribas tu entrada normalmente y en la pestaña Redactar edites todos los estilos que quieres, ya que lo has hecho y que no harás ningún otro cambio ve a la pestaña Edición de HTML y agrega los tooltips sin regresar a la pestaña Redactar.

    ¡Saludos!

    ResponderEliminar
  56. ¿Así o más ñoña?!! jajaja, mil gracias por la iluminación!!

    ¡Besos!

    ResponderEliminar
  57. A todos nos pasa, no te preocupes ;)

    ResponderEliminar
  58. Que bonito Bro!! y Sólo con CSS!!! Me encanta. Últimamente lo estaba viendo en muchas Webs, pero la verdad que no se ni que se llamaban tooltips :$

    Un abrazo!!!

    ResponderEliminar
  59. mmmmmmmm creo que me esta fallando mucho la memoria :$ vi este post, lo leí, y hasta comenté de nuevo... y ahora veo que ya había comentado, por ende, ya lo había leído, por ende... me olvidé lo que iba a decir :P

    ResponderEliminar
  60. Jajajajajaja, te lo juro bro que empiezo a creer que algo extraño le pones a tus mates, esa mala memoria no es normal, jajajajajaja.

    ResponderEliminar
  61. Creo es algo que me tendré que replantear, quizás tenga que cambiar de marca de Yerba o_Ó

    ResponderEliminar
  62. Jajajaja, tendrás que guardarme un poco de esa para cuando vaya a Argentina pueda perder también la memoria un poco, jajaja.

    ResponderEliminar
  63. Ok, te la guardo, pero para cuando vengas, ademas de esa sustancia que me hace perder a memoria, va a tener todas las toxinas del Moho y otro hongos :P ¿o te vienes pronto? jejeje.

    Un abrazo!!!

    ResponderEliminar
  64. hola potro una duda (cuando no) donde debo poner este codigo el caul es de una imagen "mapeada" que tiene varios enlaces y es este: (img src="http://dl.dropbox.com/u/11548740/EMOTI/bother.png" width="128" height="128" border="0" usemap="#map7" /)

    (map name="map7")

    (area shape="circle" coords="36,50,19" alt="joseeee" href="http://www.facebook.com/profile.php?id=100000223178786" /)
    (area shape="circle" coords="81,72,26" alt="jose" href="http://www.pizcos.net/2009/12/header-profesional-con-gimp.html" /)
    (/map)

    ResponderEliminar
  65. Nunca lo he probado en imágenes mapeadas, pero supongo que hay que agregarle el a que indica que es un enlace y seguido a él agregar class="tooltip"
    Pero te repito, nunca he usado los mapas de imágenes así que no sabría decirte con exactitud cómo sería en esos casos.

    ResponderEliminar
  66. perdon la ignoracia, no se como hacerlo alicandolo a un link, osea que al pasar el cursor por el link salga el tooltip.

    ResponderEliminar
  67. Es del mismo modo, sólo se agrega el href con la URL del enlace:

    <a class="tooltip" href="URL del enlace">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>

    Si lo deseas puedes eliminar donde dice cursor: help; para que aparezca el cursor normal de un enlace en lugar del cursor con el signo de interrogación.

    ResponderEliminar
  68. POTRO FIJATE QUE aunque no sean enlaces yo quiero ponerle un cursor que no sea "help" intente con "cursor: hand" pero no sale nada... sera posible cambiar algo o agregar un codigo?

    ResponderEliminar
  69. A veces tienes que usar dos tipos de cursores para que acepte la orden en todos los navegadores. Ponle:

    cursor: pointer;
    cursor: hand;

    ResponderEliminar
  70. ¿Qué tengo que poner donde están las letras verdes?

    ResponderEliminar
  71. Nada, sólo son anotaciones por si deseas hacer alguna modificación, por ejemplo dentro de donde dice /* Estilos de la descripción */ verás que hay distintos estilos, por ejemplo, en border puedes modificar el tipo y color de borde, en background el color de fondo, en color el color del texto, etc.

    ResponderEliminar
  72. Felicitaciones por el Blog! Lo descubrí hace poco y es de mucha ayuda. Una pregunta. El tooltip podría trabajar a la inversa?? Es decir, que el globo con la explicación se vea de entrada, y luego al pasar el mouse desaparezca???. A mí me interesaría esta forma ya que lo usaría con sólo una palabra o hipervínculo, para destacarlo del resto. Lo usaría como una especie de post-it pero no fijo, sino que se visualizaría por encima de la palabra o enlace que a mí me interesa destacar.

    Gracias y Saludos
    Turfan

    ResponderEliminar
  73. Bienvenido a Ciudad Blogger!

    Puedes hacer que esté siempre mostrándose el tooltip y al pasar el cursor se quite pero una vez que se quite el cursor encima de la palabra volverá a aparecer.

    Sólo hay que modificar la primera parte del código que has agregado, es decir en lugar de agregar eso agregarías esto:

    a.tooltip:hover { /* Estilos del texto que tiene el tooltip */
    position: relative;
    z-index: 24;
    cursor: help;
    }
    a.tooltip:hover span {display:none;}
    a.tooltip {z-index: 25; text-decoration: none;}
    a.tooltip span {display: none}
    a.tooltip span { /* Estilos de la descripción */
    display: block;
    position: absolute;
    top: 2em; left: 2em;
    width: 16em;
    border: 1px solid #0cf;
    background: #ECE0F8;
    color: #000;
    text-align: center;
    }

    Saludos!

    ResponderEliminar
  74. Muchas gracias por tu pronta respuesta! Me pondré a experimentarlo!

    ResponderEliminar
  75. No conocía esta entrada, este post tuyo. Está genial. Gracias por enseñar, potro.
    Un beso

    ResponderEliminar
  76. ¿Se puede aplicar a un enlace? Por ejemplo quiero poner en “acerca de y terminos”

    ResponderEliminar
  77. Claro, sólo se agrega el enlace:

    <a href="URL del enlace" class="tooltip">

    ResponderEliminar
  78. Holas ahora queria saber si se puede hacer el truco en una imagen y que este a la vez tenga un enlace, algo como los anuncios o banners, espero me entiendas.
    Ahh y queria que fuera el comun, como tienes en "ESTE TEXTO" (hola, soy un title) por lo que vi seria algo como:
    Texto
    Pero no estoy seguro, porque no me salio...

    ResponderEliminar
  79. Mira el comentario #19, ahí dice cómo debe ser cuando se trata de una imagen. Y en el comentario #85 cómo se agrega el enlace. Saludos.

    ResponderEliminar
  80. Ya lo encontre jeje, lo que queria era que esten juntas las dos (el enlace y la imagen, y tambien el texto), bueno la cosa es que vi el codigo de tus anuncios y me salio...
    Por cierto como haces para poner los codigos aqui en los comentarios, queria ponerlo para futuros comentarios pero no me dejaba...

    Saludos y gracias de nuevo

    ResponderEliminar
  81. Te recomiendo esta entrada, entre otras cosas se menciona cómo poner códigos en los post.

    ResponderEliminar
  82. Este es el codigo que encontre para el tooltips comun, y el que me gusta mas jeje
    <a href="URL del enlace" target="_blank"><img border="0" alt="Texto" title="Texto" src="URL de la imagen"/></a>

    Saludos El Potro

    ResponderEliminar
  83. Ya sabes que me gusta darle mas clase a todas las herramientas que nos traes por eso en este te pregunto lo que te suelo preguntar:

    ¿Podemos poner una imagen en vez del fondo que aparece en texto tooltip? ¿Cómo?

    ResponderEliminar
  84. Claro William, sólo cambia esto:
    background: #ECE0F8;

    Por esto:
    background:url(URL de la imagen);

    ResponderEliminar
  85. Gracias potro. Ahora algo más complicado...

    Ademas de texto dentro de la tooltip, ¿puedo meter una imagen y texto que solo aparezcan cuando paso el cursor por encima de un texto?

    No se si me estoy explicando bien. Reformulo:

    Si pasamos el cursor por un texto, nos saldra otra ventanita con texto.

    Yo quiero que en esa ventanita salga una imagen y además el texto.

    ¿Mejor asi? jeje

    Espero con ansias tu incombustible sabiduría.

    ResponderEliminar
  86. Con un ToolTip hecho con jQuery sí puedes incluir imágenes y texto, aunque ya no recuerdo si se pueden ambas al mismo tiempo.

    ResponderEliminar
  87. Potro como puedo hacer para que aplique este metodo en una imagen pero que tenga un Link la imagen. Osea que al pasar el cursor salga la descripcion de la imagen pero que tenga su propio link, osea me refiero a la imagen.

    ResponderEliminar
  88. Mira el comentario #74, ahí está el código a utilizar.

    ResponderEliminar
  89. Hola Potro!
    ¿Hay alguna manera de colocar en vez de un texto, una imagen dentro del tooltip?
    Es lo que estoy buscando desde hace días, pero no me fío de otras páginas.
    Saludos. Rizel

    ResponderEliminar
  90. Claro Rizel, sólo pon el código de la imagen en lugar del texto que mostrarías en el tooltip:
    <img src="URL de la imagen"/>

    Saludos.

    ResponderEliminar
  91. ola potro tengo una pregunta como le agrego este tooltip alas imagenes de mi slider
    a
    i m g alt='' src='URL DE MI IMAGEN' title='dobe+Premiere+Pro+CS6!..'/>
    a
    ESTA COn este atributo pero como le cambio el title por un tootip

    ojala se pueda gracias

    ResponderEliminar
    Respuestas
    1. Con este sistema no creo que se pueda, como ves el tooltip que se maneja aquí tiene una estructura distinta, no usa el atributo TITLE.

      Eliminar
  92. Tengo una duda, tengo unaserie de filas con los numeros de pedidos, y quiero que cada vez que se pasa por encima de cada numero de pedido aparezcan algunos dados del pedido (fecha y estado), es decir con escribir un comentario no me vale. ¿Como se puede hacer?

    Gracias

    ResponderEliminar
  93. Hola, tengo una serie de filas con los numeros de pedido en cada una, y quiero que cada vez que se pase el raton por un numero de pedido aparezca algun dato (fecha y estado); he probado el tooltip con texto y me sale correctamente ¿Pero como se puede hacer para añadir los datos concretos de cada pedido?

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Rubén, de forma automatizada no se podrá con estos métodos. En el tooltip de manera manual e independiente tendrías que poner todos los datos que quieras a cada pedido.
      Saludos.

      Eliminar
  94. Como se podria hacer para que al pasar por una imagen mostrara el tooltip la descripcion del juego?
    Ejemplo http://jorigames.com/
    pero para un blog como el mio http://www.juegos09.info/ Gracias. Estoy aprendiendo mucho leyendo tu blog

    ResponderEliminar
    Respuestas
    1. Ahí es más complicado ya que cada imagen es una entrada. Desconozco si haya un método para ese tipo de entradas en Blogger.

      Eliminar
    2. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    3. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
  95. Hola amigo, gracias por tan valiosos conocimientos, este en particular andaba buscando, pero da la casualidad que yo quisiera que en lugar de que apareciera un texto de informacion al pasar el raton por el texto original, saliera una bella imagen, podrias ayudarme en un codigo, o si este mismo sirve y que debo de cambiar para que funcione como yo quisiera.

    Saludos
    Alex

    ResponderEliminar
    Respuestas
    1. Hola Alex, sólo agrega el código de la imagen en lugar del texto:
      <img src="URL de la imagen"/>

      Eliminar
  96. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  97. En mi caso, en vistas dinámicas, no funcionó ¿alguna sugerencia?
    Saludos!

    ResponderEliminar
    Respuestas
    1. Revisa que cuando hayas puesto el primer código, el de los estilos, no hayas eliminado una llave de cierre }
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  98. El Potro, ¿cómo podría usar este truco pero que en lugar de tener subrayado el texto normalmente, que este subrayado por una línea punteada sutil? Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Cambia el text-decoration: underline; por border-bottom:1px dashed #ccc;

      Eliminar
    2. Muchísimas gracias El Potro, nuevamente sos un maestro!

      Eliminar
  99. Justo lo que buscaba, muchas gracias por esto... Tengo problemas aplicandolo al blog pero trastearé antes de rendirme...

    Grande Potro...

    ResponderEliminar
  100. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Es por la autopagiación, Blogger decide cuántas entradas deben mostrase según la velocidad de carga del blog:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Gracias por el código de la imagen, aunque tuve que eliminar el comentario por el aviso que está al final :(

      Saludos!

      Eliminar
    2. Leída esa entrada que habla sobre la paginación, y entendido el asunto. Pues vaya tela. Sé que tengo varias cosillas implementadas en el blog, pero sinceramente no creo que tarde tanto en cargar. Probaré a reducir aún más el tamaño de las imágenes y tal, pero vaya..

      No te preocupes por lo de borrar el comentario, lo comprendo perfectamente. Los fansubs somos unos incomprendidos =P
      Después de todo lo que me has ayudado a lo largo del tiempo, y de todo lo que he sacado de Ciudad Blogger, no estoy en posición de quejarme por nada =)

      El código que te pasé pues sí, supongo que a más de uno podría servirle, en BK-201 puedes verlo funcionando, y la verdad es que es pintón. Incluso se me ha ocurrido reformarlo para hacerle alguna sub-clase, y que así pueda funcionar con textos de tooltip con más de dos líneas, ya que la colocación de la imagen del before no cambia

      Un saludo Potro, y como siempre muchas gracias. Eres un crack

      Eliminar
    3. Aprendes a pasos agigantados, te veré después creando un blog de ayuda ;)

      Eliminar
  101. Alguien me puede colaborar con el codigo para intruducir una imagen dentro de un tooltip...ya me trabaja bien en cualquier control, pero quiero hacerlo un poco mas dificil con imagen interna en el tooltip

    ResponderEliminar
  102. Hola, muy bueno el codigo, el unico problema que tuve es que al crear una entrada y usar tooltips, no puedo cambiar al Modo Redactar porque se cambia el codigo del tooltip, y termina quedando como un enlace. Como puedo solucionar esto? Y ya no se puede volver a la interfaz antigua de Blogger...

    ResponderEliminar
    Respuestas
    1. No hay forma Joaquin, tienes que editar todo lo que quieras en Redactar, ya que estés seguro que no necesitas hacer más cambios entonces ve a HTML y pon el código del tooltip a sabiendas que no volverás a cambiar a Redactar.

      Eliminar
  103. Muchas gracias por el truco lo usé y me funciono a la perfección

    ResponderEliminar
  104. Bunas noches amigo, sera que me puedes orientar con algo?? se trata de un tooltips pero que me permita insertar contenido html, como imagenes o frame, mejor dicho ya no seria un tooltips sino algo como un div oculto y al hacer clic o pasar el mouse se muestra, y que pueda contener contenido html es posible?? como puedo hacer eso??

    ResponderEliminar
    Respuestas
    1. Hola, lo más cercano (que conozco) a lo que pides, son estos spoilers:
      http://ciudadblogger.com/2014/05/4-maneras-de-poner-un-spoiler-en-el-blog.html

      Eliminar
  105. Hola ,soy principiante en esto ,y cree un muñeco con html y css con div quiero saber si puedo agregar a la cara ojos etc y tambien quiero saber si puedo darle movimiento. Gracias

    ResponderEliminar
    Respuestas
    1. Supongo que sí ha de poderse pero desconozco cómo hayas hecho tu estructura y estilos, quizá convenga que preguntes a Kseso, él es experto en esto del CSS.

      Eliminar
  106. Hola, Potro! Hace años me solucionaste un monton de cosas. Permíteme que te plantee ahora otra consulta. Quiero hacer un tooltip para aplicarlo a una lista de palabras. Como una especie de diccionario que, al pasar encima de una palabra, te remita a otra. Son unas 400 palabras, cada una de las cuales tendria su equivalente. Yo lo he visto en una web que utiliza tablas, creo. Quisiera hacerlo sin tablas, con unas listas de palabras dispuestas en columnas. Se puede? Gracias de antemano por tu paciencia.

    ResponderEliminar

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