45

Tooltip con imagen

Ya os expliqué en uno de mis primeros post como añadir un tooltip a los links.
En esta ocasión explicaré como podemos conseguir un tooltip un poco más llamativo y original.
Supongo que ya sabéis que un tooltip es una ventanita emergente, habitualmente con un cuadro explicativo en su interior, en este no solo podremos añadir texto, además vamos a incluirle una imagen.

Pon el puntero sobre el link para ver como funciona:

El Escaparate
Ayuda para tu blog
Nuevo Blogger



Como en otras ocasiones vamos a ayudarnos del CSS:

1- En primer lugar vamos a nuestra plantilla y añadimos este código dentro del CSS, para los que tengais alguna duda, podemos colocarlo justo antes de ]]></b:skin> que es donde termina la parte del CSS de la plantilla.


a.tooltip {
position:relative;
color:#000;
text-decoration:none;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:110px;
border:2px solid #000000;
background-color:#CC3333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
color:#ffffff;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
}


2- Cada vez que añadamos un link en el que queramos usar el tooltip, hemos de incluirlo en este código de HTML.

<a href="URL DEL ENLACE" class="tooltip">TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN">TEXTO QUE VA DENTRO DEL TOOLTIP</span></a>

Si vamos a usarlo en los enlaces que añadamos en alguna de nuestras entradas, podemos pegarlo en opciones de la plantilla - formato - plantilla de entrada y así tenerlo "a mano"

Modificaciones
Podemos cambiar:
El ancho de la ventana del tooltip: width:110px;
El color, grosor y vista del borde: border:1px solid #000000;
El color de fondo de la ventana del tooltip: background-color:#CC3333;
El color del texto: color:#ffffff;
La alineación del texto: text-align: left;
El tamaño de la fuente del texto: font-size: 12px;
La distancia del texto al borde de la ventana del tooltip: padding: 5px;
Estas dos líneas hacen que el borde de la ventana del tooltip se vea redondeado en
Firefox, en IE se verán normal, es decir, cuadrados: -moz-border-radius: 15px;
-webkit-border-radius: 15px;

Entradas Relacionadas:

45 comentarios:


Gabriela

querida rosa:
haciendo malabares con mi plantilla borré algunos cambios, lo unico que no puedo volver a incluir es poner una imagen en vez del titulo.
ojalá me puedas ayudar...
yo sé que lo haras tu eres capa.:D adios.

Rosa

Hola gabriela!
¿Has probado así?:
http://elescaparatederosa.blogspot.com/2007/04/imagen-de-cabecera-opcion-de-blogger.html

Gabriela

gracias
ya lo logré

Miguel Vera

Rosa. Estoy tratando de agregar el widget de www.feedbuddy.net en mi sidebar y no aparece. Es un código en javascript pero no entiendo por qué no funciona. Espero me puedas ayudar.

Rosa

Miguel, lo he agregado a mi blog de pruebas sin problemas...¿has puesto correctamente la dirección del feed de tu blog? Ya sabes que en Blogger es:

http://TUBLOG.blogspot.com/atom.xml

Rosa

¡Bravo Gabriela!

Bolbo_reta

Hola Rosa! me ha gustado mucho esta idea. Voy a probar en mi blog a ver si lo consigo :)

Miguel Vera

Rosa disculpa que te moleste nuevamente con esto. Sucede que mi problema no es la dirección del feed sino que me parece que estoy haciendo algo mal al colocar el código. Te pego 2 enlaces con capturas de pantalla: El código y el resultado. Gracias de antemano. Saludos.

Rosa

Miguel, en el script de feedbuddy has puesto la dirección de tu feed de feedburner, creo que es por eso que no lo lee, prueba poniendo la de Blogger, la que te apuntaba en el otro comment, con atom

Superichy

HOla Rosa... yo recién empiezo con esto del Blog. Hoy quise modificar una foto (eliminarla); la del segundo post que subí hace unos días y... mirá lo que pasó :(

http://superichy.blogspot.com

de abajo para arriba es el segundo,
no me echarías una manito...?
Muchas gracias, Richy desde Argentina

Miguel Vera

El problema persiste. Me parece muy raro que el ícono no aparezca. Una lástima. Tendré que reponer mis íconos antiguos.

Rosa

Miguel, tu código está correcto y colocado exactamente como hice yo...lo único que se me ocurre, es que tengas algún otro script en tu blog con el que interfiera este, he puesto el botón en mi sidebar para que lo vieras más que nada, y sin problemas...

JESY2474

Rosa, se puede usar estos codigos en las etiquetas de la columna derecha?
Muchas gracias por tu respuesta

Rosa

JESY2474 , no, con las etiquetas no puede usarse.

tara

¡Está genial! ¡Y lo he conseguido! Pero...¿cómo consigo que el link se vea de color diferente al resto del texto(cuando va en una entrada,por ejemplo) para que resalte,al igual que cuando se enlaza un link con su página a la manera "normal" de siempre?

tara

Nada,olvídalo,ya lo cambié.Que tonta,que es en "fuentes y colores",jeje.

ICPNI

Parabéns por seu trabalho, estou no Brasil e descobri seu blog, estou preparendo um blog para mim, assim que aprontar colocarei seu link e te avisarei Abraços
Carlos

Rosa

ICPNI, gracias por tu visita!

NotiGen

Hola Rosa, cómo estás? :)

Esta entrada me hizo recordar que hace un par de años utilicé un script para una web totalmente maquetada con CSS, algo muy simple y precario :$

Intenté aplicarlo en el blog y aquí tienes el ejemplo de lo que resultó.

El único inconveniente es que no supe cómo solucionar lo de "html no aceptable" por el ícono del título del tooltip y entonces lo publiqué a lo Pirro :S
Claro que también se puede prescindir de él, pero sería bueno encontrar una alternativa viable para quien desee utilizarlo, no te parece?

Te paso la dirección del script (donde yo lo alojé, porque ya ni recuerdo de dónde lo tomé) y la de la imagen que utilicé.

Los atributos de estilo se cambian directamente en el script, seguramente te darás cuenta dónde (si hasta yo pude..)

Estoy convencida que con tu maestría sabrás lograr algo mucho mejor que lo mío y crear una entrada decente -si quieres- en este maravilloso blog, ya que el mío se dirige hacia otra temática.

Cariños :D

Rosa

NotiGen Pues da la casualidad de que me parece que lo tengo yo por ahí guardado...:D
A simple vista del resultado me parece el mismo, aunque sin la imagen...lo miraré.

¡Muchísimas gracias por compartirlo!

Manfenix

Hola Rosa, implementé el tooltip modificándolo un poco para mi necesidad, si puedes, míralo en la sidebar izquierda, Destacados.
Estudiando el código, al intentar aplicarlo en la otra sidebar para Flow sheet Azúcar - HACCP veo que el tooltip se ve al final de la imagen, o sea hay que esperar que transcurra toda la imagen hasta poder ver el tooltip.
Probé valores (+ y -) para top y left en el código. Pero caí en la cuenta que deberia tener otro class con distinto nombre para usarlo en este caso. Estoy en lo correcto?
Y si es así, es conveniente tener códigos de tooltip con diferente nombre en la CSS de la plantilla para poder posicionar el tooltip por ejemplo, uno abajo del puntero y otro por arriba?
Intenté ser claro con la pregunta....:O....jajaja.
En Vagabundia el código es ligeramente distinto por tooltip hover. Por lo que entendí es para priorizar superposiciones. Lo apliqué en tu codigo y no pasó nada. Perdón por el abuso...pero...mi excusa es que estoy experimentanto...:P. Bueno recién me di cuenta que esto es un testamento...sorry.
Saludos como siempre.

Rosa

Manfenix Así es. Si van a usarse dos toolptips con diferentes propiedades en la misma plantilla, estos tendrán que tener una clase distinta y un css distinto para cada clase.

Manfenix

Hola Rosa, tengo el siguiente problema con el tooltip. En Firefox, se ve bien el efecto. Pero en IE las imágenes salen de la ventana que los contiene y se detiene su movimiento. Por ahora eliminé el efecto de mi blog Te mando por email los códigos que armé. En cuanto tengas tiempo héchale una mirada. Creo que el problema está en la sintaxis de los códigos, pero yo novato en esto, no lo detecto. Un abrazo.

..::Ezequiel::..

hOla Rosa! tengo una consulta!

Tu tutorial es exelente.. pero quisiera saber como hacer para q en ves de un link sea una imagen con link! y al acercar el puntero aparezca el tooltip con texto ..

Espero q me puedas ayudar!

Desde ya muchas gracias

Rosa

Ezequiel Sería así:

<a href="URL_DEL_ENLACE" class="tooltip"><img src="URL DE LA IMAGEN"><span>TEXTO DENTRO DEL TOOLTIP</span></a>

Manfenix

Hola Rosa. Te llegó el email con el código que tiene el tooltips?. Saludos

Rosa

Manfenix Efectivamente tengo un correo tuyo...aún no lo he abierto, ya sabes que voy siguiendo el orden de llegada y entre emails y comentarios ufff, encima he tenido el PC en obras y no podía conectarme más que un para de horas desde un ciber...lo siento, intentaré espabilarme. :S

Manfenix

No hay prisa Rosa, cuando puedas lo ves. Solo quería asegurarme que te había llegado el email. Besos :)

Un Perro

Hola Rosa !!
para variar me he trancado, a mi precario entender, noto que hago todo tal cual, pero no logro el efecto deseado.
Se ve la imagen, y el texto de corrido en un link.
Estoy experimentando con un nuevo emprendimiento en conjunto con un compañero, por ahora no tengo urgencia pues no lo he sacado al ruedo al blog, pero este "truco" me parece genial para destacar ciertas cosas.
Te dejo el link del niño en crecimiento.

BLOG

Te dejo un beso y espero que estes bien Rosa :D

Rosa

Un perro No entendí bien eso de "se ve la imagen y el texto de corrido"... ¿tienes el efecto añadido para verlo?

Un Perro

Hola Rosa, :) disculpa el entrevero, el efecto lo tengo añadido en mas de una entrada, AQUÍ y en las entradas anteriores también esta el truco probado.
Un beso Rosa

Rosa

Un perro Has dejado en el CSS el ancho del tooltip como yo lo puse en el ejmplo: width:110px;

La imagen es tan grande que se sale, trata de aumentar el ancho de la tooltip a un poco más que el de la imagen, aunque tampoco veo muy acertado usarlo con imágenes tan enormes :S

Un Perro

pequeño gran detalle Rosa..no me había percatado de que la medida de la imagen insidia directamente en el funcionamiento del tooltip...
Muchas gracias, :D
Te dejo un beso grande

El que sabe, sabe, y el que no ... debe pasar por el Escaparate

Manfenix

Hola Rosa, saludos...regreso por tu ayuda :)...
Intento aplicar el tooltips en dos textos que actúan como enlaces. El problema es que como están cerca uno del otro (uno en la linea superior), al mostrarse el tooltip del enlace superior, se vé el texto del enlace inferior. He buscado la forma de solucionarlo pero nada!!!.
Hay solución para este fallo. :S
Gracias por tu tiempo :)

Manfenix

Este es el problema

Rosa

Manfenix No tengo idea de porque sucede esto... en el css del toltip está indicado para que no pase... no obstante, prueba cambiando en el css esta línea: position:relative; por position:absolute; si esto no va... ni idea.

Manfenix

Rosa, cambié el valor de position a absolute y no solucionó el problema. Ya estaba por desistir de usar el tooltip, cuando se me ocurrió modificar los valores de top y lef de tal modo que el tooltip no se superpusiera sobre el otro enlace. Y salió bien :)
Aqui la muestra.
Volver a tu blog, me inspiró.... ;)
Saludos y gracias!!!

Manfenix

Me comí la "t" en left.... :o

Rosa

Manfenix Te entendíamos igualmente, je,je.
A veces voy tan "atontada" que no veo la opción más fácil y me complico la vida sin necesidad... enhorabuena por lograrlo solo,eso quiere decir que vas entendiendo como usar el CSS :D:D

Manfenix

Gracias a ti (léase "a vos" en argentino)... ;)

lacajadepandora

Hola
quiero mover la ventana para que no aparezca debajo sino a lado derecho, el estilo que creaste permite eso?

y otra quiero añadir un link dentro de texto y colocar viñetas, porque son dos párrafos los que quiero que tenga. Que modificaciones debe hacer en el estilo?

Rosa

lacajadepandora Mover la caja de posición no.
Para incluir un parrafo nuevo, deberás poner <br/> al final del anterior.

Fernando

Hola Rosa, tengo una imagen (logo de Zaragoza) y no puedo ponerle un toolip con imagen y enlace a otra pagina, tiene que ser facil pero he probado de mil maneras y nada, no he podido. Ya me diras si se puede y cual es el dichoso codigo, porque he probado de todas maneras (menos de la que es claro). Un saludo.

Rosa

Fernando El problema sería que un tooltip no se queda fijo, es decir, se muestra al pasar el ratón por el enlace o la imagen y se abre como una información, pero si añades un enlace en el, al ir a poner el ratón sobre ese enlace el tooltip se cierra... para eso tendría que usarse una ventana emergente o algo así...

Fernando

Gracias Rosa, ya me parecia a mi, ya que lo puse de mil maneras y nada. Bueno pues lo dejare como esta. Mil gracias por la respuesta. Un saludo.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S