Originales mensajes emergentes para imágenes con CSS. | Oloblogger Los sajones llaman tooltips a esos mensajitos que salen cuando pasamos el puntero por encima de un ...

2 de febrero de 2012

Originales mensajes emergentes para imágenes con CSS.

Los sajones llaman tooltips a esos mensajitos que salen cuando pasamos el puntero por encima de un elemento y que nos muestran algún tipo de información, normalmente un texto.

Wikipedia que en esto de definir es bastante mejor que yo, dice que...


Esta es la imagen que tengo en mi perfil de G+Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual,
que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

Así que si os parece, nos quedamos con eso de descripción emergente, que es por ejemplo lo que nos sale cuando pasamos por encima de una imagen con title (o alt). En la lechuza de la derecha podéis ver un ejemplo.


Y una vez visto el ejemplo normal a ver que tal os parece este otro que he visto en Tympanus:



Bueno ¿verdad? Pues aquí no hay ninguna otra cosa más que CSS. En la página antes enlazada de Tympanus podéis una versión más extendida del código que incluye las imágenes mediante un sprite, pero por aportar algo, a continuación una versión más reducida con imágenes individuales.

Se necesita todo el código para conseguir este efecto pero lo voy poniendo por trozos para explicar un poco qué hace cada parte.


La parte HTML sería una lista de imágenes con enlace, a la cual añadimos un texto -el que se verá después en la descripción emergente- encerrado en un span.

<ul class="tt-wrapper">
<li><a href="URL_ENLACE1"><img src="IMAGEN1" /><span>TEXTO1</span></a></li>
<li><a href="URL_ENLACE2"><img src="IMAGEN2" /><span>TEXTO2</span></a></li>
<li><a href="URL_ENLACE3"><img src="IMAGEN3" /><span>TEXTO3</span></a></li>
<li><a href="URL_IMAGEN4"><img src="IMAGEN4" /><span>TEXTO4</span></a></li>
</ul>


Claro, así a pelo esto nos mostrará sólo una simple lista de imágenes y texto, por lo que empezamos con dar algo de forma a la lista eliminando las viñetas, dándole un tamaño para poderla posicionar bien y ajustando márgenes y padding. El ancho será el que ocupen todas las imágenes que vamos a poner más sus márgenes. El margen superior de 80px es porque necesitamos espacio por arriba para que los mensajes se muestren sin solapar otros textos o imágenes de alrededor:

ul.tt-wrapper {
list-style:none;
padding: 0;
width: 248px;
height: 70px;
margin: 80px auto 0 auto;
}

Como vamos a usar imágenes, para que queden todas en línea, a cada elemento de la lista lo hacemos flotar. Luego al enlace le damos el tamaño de cada imagen y un pequeño margen para que no aparezcan todas pegadas. Añadimos un posicionamiento relativo para luego poder ubicar dentro de esta capa la del mensaje.

ul.tt-wrapper li{
float: left;
}
ul.tt-wrapper li a{
display: block;
width: 58px;
height: 58px;
margin: 0 2px;
outline: none;
position: relative;
}


Y ahora empieza lo bueno. Damos el estilo al texto mediante el span que lo rodea: ancho, altura, tipografía, sombras, etc. De aquí destacar el posicionamiento al 50% con respecto a la izquierda que se corrige para centrar el texto con un margin-left negativo.

Para que el texto no se solape con la imagen y conseguir luego el efecto de que baje suavemente, lo ubicamos 100px por encima. Importante también para la "aparición", la opacidad cero que en un principio hace invisible el texto.

La última parte es la que se ocupará de gestionar una transición suave desde la transparencia y la posición elevada del span hasta la opacidad casi total y su ubicación justo por encima de las imágenes. Como siempre, debería bastar con usar la última propiedad (transition), pero hemos incluido los kits de compatibiidad de varios navegadores para que funcione bien en todos ellos. Si alguien está pensando en ver esto en IE que se olvide, por cierto.

ul.tt-wrapper li a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
font-family: Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.3);
border-radius: 5px;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: -70px;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}


Lo tenemos casi todo listo, pero antes de aplicar la última propiedad que nos permitirá ver todo esto al pasar el puntero por encima, añadimos un triángulo gris (rgba negro con opacidad 10%) para que el texto parezca un bocadillo de cómic. Lo creamos con un truco que genera una capa de tamaño cero con grandes bordes. La transparencia de algunas orientaciones terminan de conseguir esa forma y una vez más, lo posicionamos. También lo centramos con 50% y margin, pero en esta ocasión, algo más abajo que el texto (bottom negativo).

ul.tt-wrapper li a span:before,
ul.tt-wrapper li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}


Lo siguiente es un detallito estético que crea un nuevo triángulo blanco solapado sobre el anterior (gris). Al ponerlo 1px más arriba, deja ver parte del gris -1px precisamente- y así simula ser el borde del triángulo.

ul.tt-wrapper li a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}


Y ahora sí terminamos. Al hover del enlace le añadimos una opacidad casi total (0.9) y cuando pasemos el puntero se verá nuestro fantástico tooltip.

ul.tt-wrapper li a:hover span{
opacity: 0.9;
bottom: 70px;
}


En la web de Tympanus hay cuatro demos que incluyen este y otros tres efectos más, hechos con la misma técnica.

Y por si a alguien le interesa, los iconos para la demostración los obtuve de Más que dibujitos, desde dónde podéis descargaros un paquete completo con iconos del mismo tipo en formato vector.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

39 comentarios :

  1. Yo ayer publiqué una entrada sobre esto, sólo que mediante javaScript (sobretodo por lo de la compatibilidad entre navegadores a la hora de aparecer). Pero hay que reconocer que los de Codrops son geniales.

    Aparte de eso: ¿Te importaría pasarte por aquí y decirme cuál de los dos diseños te gusta más?

    ResponderEliminar
  2. excelente pense que esto solo se podia haceer con javascript, olle oloman y esto se podria agregar en una web que no sea un blog en html y como seria?

    ResponderEliminar
    Respuestas
    1. Es exactamente lo mismo. La parte de estilo en la hoja de idem de la web y el html dónde quieres que aparezcan las imágenes

      Eliminar
  3. ya vi como se puede, muy facil y genial, muchas gracias oloman

    ResponderEliminar
    Respuestas
    1. Nos cruzamos en nuestros últimos comentarios ;)

      Eliminar
  4. Muchas gracias Oloman, Ya lo estoy usando ;-)

    Un saludo

    ResponderEliminar
  5. Vaya vaya, todo esto va antes de ]]skin ¿?

    ResponderEliminar
    Respuestas
    1. Todo no. El primer trozo es HTML y va dónde quieres que se muestren los botones con sus mensajes. El resto, en el mismo orden que se ven, todo junto antes de ese cierre del SKIN.

      Eliminar
  6. Se ve padre Oloman lo interesante es que ocultan el contenido emergente con la opacidad, literalmente lo vuelven invisible, sólo queda pendiente agregar el filtro para IE8 y versiones anteriores:
    filter:alpha(opacity=0)

    Buen finde ;)

    ResponderEliminar
    Respuestas
    1. Así es, al igual que con el border-radius y el text-shadow. Es una lata, pero para que esos códigos de CSS3 funcionen en más navegadores hay que ir triplicando o cuadruplicando líneas. En fin...

      Eliminar
  7. Oloman: estoy tratando (hace un buen rato) de hacer funcionar este "cacharro", y no logro que los "globitos" con los títulos no se escondan debajo del gadget que tengo colocado arriba de éste. Probé varias alternativas con tamaños, posiciones y z-indexes, pero nada.
    Si podés echarle una mirada y dirigir mi esfuerzo te lo agradeceré.
    Está instalado en este blog de pruebas: http://elpdlv.blogspot.com.ar/

    Saludos.

    ResponderEliminar
    Respuestas
    1. .tabs .widget ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      list-style: none;
      }

      Ese overflow:hidden es el culpable. Elíminalo de tu CSS.

      Si no lo tienes (quizás lo mete Blogger), entonces añade esto otro:

      .tabs .widget ul {
      overflow: visible !important;
      }

      Eliminar
    2. ¡Listo!, tuve que agregarlo. Ahora me resta acomodarlo un poco mejor. Ya veremos.

      Los saludos y las gracias de siempre.

      Eliminar
  8. Me encanta!!! Quisiera saber si hay un post sobre poner imágenes de fondo en los títulos de los Gadget. Muchas gracias por el gran aporte!!!

    ResponderEliminar
    Respuestas
    1. Publicado no, pero sólo se trata de añadir un background con imagen a la clase h2:

      h2 {
      background: url(DIRECCION_IMAGEN_FONDO);

      Eliminar
  9. Amigo, no sé cómo instalar esto en mi blog. Solo veo códigos, pero no sé dónde tengo que ubicarlos. Saludos.

    ResponderEliminar
    Respuestas
    1. El HTML dónde quieras que salga la lista (barra lateral, en plantilla para pie o cabecera de post, etc.)
      El CSS entre las etiquetas SKIN, en cualquier parte.

      Eliminar
  10. Esta exelente nadamas que estaria genial que pusieras en que lugar va cada cosa porque yo no se donde ponerlo,saludos

    ResponderEliminar
    Respuestas
    1. El primer trozo (HTML) va dónde quieras que se vean los botones o imágenes. El resto es CSS y va todo entre las etiquetas SKIN de la plantilla. Más info

      Eliminar
  11. Hola querido amigo, soy ELSACERDOTE2011 (el UBICUO) jeje =)
    Esta entrada es muy interesante para lograr poner ese mensaje emergente en la imagen de cada Entrada para usar la imagen de la entrada como link para descargar las revistas desde un host. Me puedes ayudar? Porque por lo que veo está hecho para poner en otro tipo de lugar, pero no en una entrada. Se puede adaptar? El código supongo iría en ENTRADAS para que se repita en cada entrada que realice. En este mismo blog ya implementé ENTRADAS POPULARES y quedó espectacular.
    Espero tus comentarios y te dejo un abrazo. El blog es http://tejerartesania.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola William. Para hacer eso mejor usa este otro código que no usa listas. Tendrías que localizar la clase con la que creas las entradas en forma de sumarios (o aquella que corresponda al elemento dónde quieres poner los mensajes emergentes) y sustituir la que en aquel post se usa (.popular-posts) por esa clase.

      Eliminar
    2. Gracias amigo. Lo probaré. Abrazo ELSACERDOTE2011 (el UBICUO)

      Eliminar
  12. Que tal Oloman, excelente Post, perooooo esta es una plantilla que estoy probando http://probacambios.blogspot.com/ , es una plantilla que la utilicé de Ciudad Blogger, pero como lo que necesito implementar es tuyo, pues te pregunto a tí. Aquí va = Necesito implementar el mensaje emergente para no poner un botón estático que diga DESCARGAR AQUÍ, He colocado los códigos de esta entrada dentro de SKIN
    Primer Problema es que la imagen debe quedar habilitada para la descarga recién cuando te metes en la Entrada NO DESDE LA PORTADA
    Segundo Problema, con los 80 px de margen que necesita el mensaje para no solaparse la imagen que se ve en la portada queda fuera de cuadro
    LOS DOS PROBLEMAS SE RESUMEN en que la imagen en la portada debe mostrarse encuadrada en su sitio y la función del mensaje emergente y aledaños SOLO DEBE FUNCIONAR en la misma Entrada NO EN LA PORTADA del blog.
    Espero haber sido claro, para no confundirte. Espero puedas ayudarme, aunque en tí lo descuento, eres el UNO ....... esto es para el Egómetro =) Gracias y saludos

    ResponderEliminar
    Respuestas
    1. Si sólo quieres que se vea en la entrada, entonces pasa el último trozo de código (el del hover, el que hace que aparezca) al HEAD, justo antes del cierre del mismo y mételo dentro de una condición con PAGETYPE=ITEM.

      Más información sobre condiciones

      Eliminar
    2. Gracias Oloman por tu pronta respuesta. Hice eso, la imagen de la portada sigue descuadrada aunque no sale el mensaje emergente (pero me imagino que aún sigue presente, de lo contrario la imagen debería volver a su cuadro) y cuando voy a la entrada arriba del menú aparecen los códigos que puse antes del cierre de head y no me aparece el mensaje emergente en la entrada, aunque debo decir que la entrada se muestra en forma correcta y la foto contiene el enlace para la descarga correctamente. Disculpa tanta la lata, espero tus comentarios. Gracias y un abrazo.-

      Eliminar
    3. AÑADO ESTE COMENTARIO, la condición de PAGETYPE=ITEM esta repetida muchas en la plantilla por diferentes cosas, pero dentro de la condición hay un <b:include o <style...... quizás este faltando algo y por eso se muestra el código en la entrada del blog NO en la portada. Me pareció importante añadir este comentario. Gracias

      Eliminar
    4. Me he perdido Artesa. Ya no sé lo que quieres porque ahora hablas de imágenes descuadradas y no sé cuáles son esas ¿esto lo pusiste en un post concreto, en todos, en dónde...?

      Eliminar
    5. A ver si clarifico. Este blog de pruebas http://probacambios.blogspot.com/ que es copia de otro que tengo funcionando le quiero hacer desaparecer el botón DESCARGAR AHORA por el MENSAJE EMERGENTE. En la portada de PROBACAMBIOS la primer revista se ve DESENCUADRADA porque en esa entrada estoy aplicando tus mensajes emergentes. Realicé tu sugerencia en cuanto al PAGETYPE=ITEM pero no solo NO FUNCIONA sino que aparece en la parte superior de PROBACAMBIOS cuando estás dentro de la entrada el código del hover que me mandaste separar.
      Esto de MENSAJES EMERGENTES lo tengo funcionando perfectamente en http://artemundocrochet.blogspot.com y quiero aplicarlo a PROBACAMBIOS.
      Tomate un minuto y mira ArteMundo para que veas lo que digo.
      Gracias y un abrazo. Espero tus comentarios.

      Eliminar
    6. Repasa tu CSS, porque no encuentro esto:
      ul.tt-wrapper li a:hover span {
      opacity: .9;
      bottom: 70px;
      }

      Eliminar
    7. Está dentro de una condición PAGETYPE=ITEM en HEAD como me mandaste poner, por supuesto que no está en CSS. Por eso te digo que ESE CÓDIGO aparece en la parte superior del blog. Que entendí mal?

      Eliminar
    8. A lo que me refiero es a que no sale esa parte en concreto del CSS. ¿Quizás al copiar metiste dentro de la condición todo el código y olvidaste eso?

      Lo que te confirmo es que el problema es que no existe ese trozo de código al cargar una página de entradas y por eso no funciona el efecto.

      Eliminar
    9. Realmente me siento superado. Podrías ser tan gentil de escribir esa condición? para colocar dentro de HEAD y que dejo en CSS.
      En verdad no me gusta pedirte esto, pero realmente estoy superado. Gracias por lo que puedas hacer. Saludos

      Eliminar
    10. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>
      ul.tt-wrapper li a:hover span {
      opacity: .9;
      bottom: 70px;
      }
      </style>
      </b:if>

      Eliminar
    11. MAESTRO de MAESTROS y además con una paciencia a prueba de bombas químicas. Bueno, te diré que la PRIMERA parte del problema ESTA SOLUCIONADO. =)
      El siguiente problema de los mensajes es DOBLE, la imagen de la portada que no queda en su lugar y que si hago click en la imagen me lleva directamente a la descarga. Es decir, la imagen debería quedar en su cuadrito y si PINCHO EN LA PORTADA la imagen no debería HACER NADA y cuando entro al post que ahora sale el HERMOSO mensaje emergente, debe llevar al usuario a la descarga.
      Puedes ayudarme? Dime que si, dime que si , dime que si, por faaaaaaaa
      Por favor pásate por el blog http://probacambios.blogspot.com/ y mira lo que te digo. Gracias por tu paciencia y ayuda. EN SERIO gracias.

      Eliminar
    12. No sé cómo haces los sumarios ni puedo estar repasando tu plantilla para averiguarlo, pero la clave está ahí. Ese sistema que uses será el que tengas que modificar para que en portada te muestre lo que quieres y no otra cosa. Ahora mismo te saca sólo título y miniatura con enlace ¿no? Pues tienes que buscar la manera de que sea sólo el título y la miniatura. Si esto lo llegas a decir antes nos ahorramos un montón de comentarios, pues con eso también hubieras solucionado lo de los mensajes emergentes que salen en portada y no deberían.

      Simplemente usa un sistema de sumarios (o modifica el que tienes) que sólo te tome los elementos que quieres mostrar.

      Eliminar
    13. Gracias por tus comentarios y consejos. Veré

      Eliminar