JMiur [E]

Hay muchas formas de crear tooltips con CSS; probablemente, esta, que muestra webdesignerdepot.com es una de las más sencillas que existen ya que sólo se requiere establecer una clase en el enlace o etiqueta a la cuál queremos aplicarlas y poner las dos reglas de estilo.

En este caso, la clase la llamamos tooltip pero, puede ser cualquier otro nombre y funcionará en cualquier navegador que admita el uso de los pseudo-elementos :after y :before.

El formato gráfico es completamente configurable así que las variaciones pueden ser casi infinitas.
<style type="text/css">
  .tooltip {
    display: inline;
    position: relative;
  }
  .tooltip:hover:after {
    bottom: 26px;
    content: attr(title); /* este es el texto que será mostrado */
    left: 20%;
    position: absolute;
    z-index: 98;
    /* el formato gráfico */
    background: rgba(255,255,255, 0.2); /* el color de fondo */
    border-radius: 5px;
    color: #FFF; /* el color del texto */
    font-family: Georgia;
    font-size: 12px;
    padding: 5px 15px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 150px;
  }
  .tooltip:hover:before {
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    /* el triángulo inferior */
    border: solid;
    border-color: rgba(255,255,255, 0.2) transparent;
    border-width: 6px 6px 0 6px;
  }
</style>
Y se usaría así:
<a href="#" title="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo</a>

El texto que se mostrará es el que se encuentra en el atributo title de la etiqueta; si se quisiera utilizar otro atributo, bastaría cambiar la propiedad content; por ejemplo si se quiere usar rel o href sería:
content: attr(rel);
content: attr(href);
Hay que tener en cuenta que, dada su sencillez, el tooltip se verá "cortado" cuando se queire mostrar en algo que está muy a la derecha si el contenedor donde se encuentra la etiqueta tiene la propiedad overflow: hidden; algo bastante común en muchas plantillas de Blogger.

37 comentarios:

Graciela de Palomas  

Buen día! lo sencillo perdura, a veces una anda buscando 'cosas' complejas y con el tiempo ya no funcionan en la plantilla.
Lo voy a aplicar, muchas gracias, chauuu :)

JMiur  

Aplique y pruebe que este es fácil -)

Responder
Graciela de Palomas  

Menos mal que cada tanto ingreso a la cuenta de Google, me imagino si empezara hoy, con tremendo panel -que no se sabe donde pinchar- ufff

Responder
XIC Nou Barris  

hola jmiur,,, otra vez por aquí; si quisiera poner una imagen con enlace??? he probado pero solo me sale la imagen. gracias de nuevo.núria

JMiur  

Explica un poco más; si se trata de este tooltip es lo mismo, en lugar del texto colocas la etiqueta IMG

Responder
STEVEEN FIGUEROA SANCHEZ  

buen dia jmiur disculpe es que soy nuevo en esto y tengo problemas con mi blog en la parte de arriba hay un espacio y no quiero este en el link
http://lovefenyx.blogspot.com/

JMiur  

Ese espacio está formado por dos partes; primero, la navbar asi que la puedes ocultar con esto en el CSS:

body .navbar {display: none;}

Luego, un apdding en el contenedor inferior:

.content-outer {
margin: 0 auto;
padding-top: 20px;
}

bastaría entonces que ahí, quitaras eso de padding-top: 20px;

Responder
Ann Reed  

¡Hola! Quiero hacerte una pregunta pero no tiene nada que ver con esta entrada, espero que no te moleste.

Lo que ocurre es que tengo un problema en mi blog al comentar (http://damaliteraria.blogspot.com/). Cuando hago click en el enlace de los comentarios ("n° comentarios") que está bajo el título de cada entrada, la sidebar se sube y no puedo comentar, responder mensajes o usar el gadget de seguidores, pero esto no ocurre cuando hago click en el título de la entrada. ¿Qué puede estar mal?

JMiur  

¿En qué navegador te ocurre eso? Pregunto porque no he notado nada malo.

Ann Reed  

¡Hola! Gracias por contestar. Eso me ocurre en google chrome y no soy la única a la que le pasa, por eso quiero arreglarlo. Por si acaso aclaro lo de arriba: al visitar una entrada individual uno puede hacer click en el título de la entrada o en el número de comentarios que tiene el post, en ambos casos el enlace me lleva a una entrada individual. Con el primero no hay problemas (la url es más o menos así: http://damaliteraria.blogspot.com/2012/12/dia-13-un-libro-que-deseaste-no-haber.html), es con el segundo que tengo drama (cuya url es así: http://damaliteraria.blogspot.com/2012/12/dia-13-un-libro-que-deseaste-no-haber.html#comment-form). Si al segundo le quito lo que viene después de "html" el problema se "soluciona", si no lo hago, y trato de comentar como está no se puede.

JMiur  

Lo he estado mirando un rato y efectivamente, eso ocurre en Chrome pero no encuentro el motivo. Es probable que, como estás suando los comentarios anidados de Blogger y eso es algo que se genera con JavaScript, el navegador esté cometiendo algún error.

Eso que ves al final #comment-form es un anclaje o sea, en tu plantilla debe haber algo como
<a name="comment-form"></a>
que está en un DIV que tiene ese mismo ID comment-form

Una cosa que se me ocurre es que tal vez, ese ID o sea, ese nombre, sea el que está confundiendo al script o al navegador. Podrías probar cambiarlo por cualquier otro que se te ocurra y se sea particular, distinto de cualquier otro. Cambiarlo en el ID del DIV, en el NAME de la etiqueta A. Eso lo puedes probar antes de cambiar las direcciones de la plantilla.

Por ejemplo si lo llamas miscomentarios puedes probar entrar en la página de este modo:

http://damaliteraria.blogspot.com/2012/12/dia-13-un-libro-que-deseaste-no-haber.html#miscomentarios

Si sigue pasando lo mismo, el error es de alguna incompatibilidad de ese tipo de plantilla, Chrome y Blogger; si eso lo soluciona, hay que cambiar las direcciones de los enlaces.

No sé si se entiende algo de lo escrito ... realmente, es un problema que me dejó confundido :-D

Ann Reed  

La verdad es que no te entendí muy bien u///u pero hice algunos "experimentos". Primero cambié todos los "comment-form" por "comentarios" (en la plantilla) y casi se solucionó el problema. Me explico, cuando la url de la entrada termina así: ".html#comment-form" si puedo responder los comentarios y la plantilla no sufre ningún cambio, pero cuando publico un comentario, la entrada se actualiza (y se convierte en algo así: http://damaliteraria.blogspot.com/2012/12/dia-13-un-libro-que-deseaste-no-haber.html?showComment=1355466339609#c1399711900234658967) y vuelve a tener el problema anterior, que las columnas se suben y es imposible comentar desde allí. Lo raro es que volví a cambiar "comentarios" por "comment-form" y sucede exactamente lo mismo, es decir que las entradas terminadas en "#comment-form" no sufren ningún problema pero sí las terminadas en "?showComment=(números)".

A propósito, tenía un blog de pruebas y puse allí la plantilla del blog con problemas y no tengo ninguna dificultad para comentar, sea de la forma que sea... así que no entiendo cuál es el problema T.T

JMiur  

Sí. Esa era la idea básica; probar cambiando el ID del anclaje y ver el resultado.

Si en un blog de pruebas funciona bien con la misma plantilla, el problema debe estar en algún gadget y el primero a verificar sería el de seguidores que siempre causa dramas extraños.

Deberías probar quitándolo y viendo si es el que causa el problema.

Ann Reed  

Probé eliminando el gadget de seguidores pero no funcionó. ¿Debería probar con los demás?

JMiur  

Si tienes un blog de pruebas donde no pasa lo mismo es que debe haber una diferencia entre ambos y una de esas diferencias es justamente los gadgets. Puedes ir quitándolos del principal o irlos agregando al de pruebas.

Ann Reed  

Probé eso, incluso eliminé algunos, pero el problema persiste. Eso sí, me di cuenta de algo, aunque no sé si sea relevante. Lo que ocurre es que cuando las direcciones terminan así: ".html", ".html#comment-form" y ".html?showComment=1355466339609", en el blog no hay problemas, sin embargo cuando respondo o simplemente publico un comentario, la url termina así: ".html?showComment=1355466339609#c1399711900234658967" y esto "#c1399711900234658967" pareciera ser el causante de los problemas... No sé si sea importante...

JMiur  

Como todo eso es manejado por el script de Blogger, es imposible saber las razones del error. Evidentemente, hay alguna clase de interferencia con algo pero no sé cuál.

Ann Reed  

Entonces ¿deberé esperar a que se solucione sólo o me aconsejas otra cosa? Gracias por intentar ayudarme, aprecio tu ayuda =)

JMiur  

Imposible decirte mucho más. Lo raro es que en un blog de pruebas funciona bien.

Responder
Alcion Inugami  

Excelente, gracias JMiur, siempre impresionas con cosas sencillas :D

Responder
Fernando  

Hola, tengo una imagen para las descargas de esas que cuando pasas el raton cambia, me gustaria saber si puedo aplicar este truco ya que lo he probado poniendolo en distintas partes y no me funciona, por el royo de cambio de imagen imagino, el codigo que tengo no me deja ponerlo en el comentario para que supieras como es, una pena.
¿Puedo ponerlo?, o en su caso ¿habria algo parecido?.
Lo tengo en el blog http://queenspain.blogspot.com.es/ .
Enhorabuena por tu blog, lo visito a menudo y he cogido varias cosas, casi modifico las plantillas sin preguntar (casi).

JMiur  

Habría que ver tu ejemploc oclocado porque no hay ningún problema en usar una imagen en lugar de un texto.

Responder
EmmaX  

una pregunta jmiur, se puede agregar algun efecto, usando transiciones?

JMiur  

Puedes intentarlo pero no será sencillo encontrar alguna que funcione ya que no hay propeidades que cambien de un estado a otro.

Responder
Revista Pixel MX  

Excelente! gracias a ti Jmiur he chuleado mis blogs :)

Responder
Svalin  

Saludos JMiur

Aplicando este sencillo efecto para los tooltip, me preguntaba si aún podría personalizarse más. Dos cosas en particular..

La primera, ¿podría ponerse una imagen en lugar del triángulo inferior? He probado con 'background: url' y no me ha salido nada. La idea era eso, poner una imagen donde está el triángulo en lugar de crear ese triángulo con .CSS

La segunda. Aplicando el texto del tooltip a una etiqueta, como por ejemplo span, se pueden hacer saltos de línea, poner el texto en negrita, etc.. ¿es eso posible? Es decir, ¿aparte de href, title y rel, se podría aplicar el content a span?

Gracias

Responder
Svalin  

Ya lo solucioné, basta con cambiar el segundo content por un content: url() y borrar el resto de código innecesario

Responder
Andréa Smirna  

OBRIGADA

Responder
Imágenes SagitarioXP  

Saludos maestro.
Quería saber si se puede aplicar al pasar el mouse por encime de una imagen, en lugar de un enlace :)
Desde ya muy agradecido.

JMiur  

Se hace complicado poner eso sobre una imagen. En todo caso, podrías colocar la imagen en una etiqueta DIV o SPAN con la clase tooltip y allí colocar al etiqueta IMG

Responder
Sergio Ostapchuk  

hola mi consulta es la siguiente: al poner el tooltip personalizado sigue saliendo el nativo, osea aperasen los dos uno en gris y otro negro que es el personalizado, la cuestión es como desactivar , el nativo que trae , en mi caso uso joombla 2.5, porque queda lindo y funciona pero si aperasen los 2 es medio cargado, agradezco tu solución, aver si, podes contesata!!! saludos...

Responder
Sergio Ostapchuk  

espero una respuesta.. a mi pregunta.. saludos..

JMiur  

Simplemente, no uses el atributo title sino cualquier otro. Si en el CSS dice:

content: attr(title); /* este es el texto que será mostrado */

cámbialo por ese nuevo atributo, realo inventado:

content: attr(mitooltip);

y el HTML sería:

<a href="#" mitooltip="este es un ejemplo de tooltip sencillo" class="tooltip">un ejemplo</a>

Responder
jnv1212  

una pregunta se le puede poner estilo al tooltip por que yo intente ponerle font color:red;hola /font br/ y me sale esto de texto en ves de tomarme como color rojo

JMiur  

El color se define en la clase:
.tooltip:hover:after { color: red; }

Responder
LORD DARHAKEXGE  

Disculpa, hay alguna manera de que aparesca una imagen en vez de texto?

JMiur  

No con este sistema; a lo sumo con trabajo, una imagen de fondo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR