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...

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:

• Hazte fan... si quieres
• Oloblogger
• ¿Nos lees en Twitter?
• Suscripción RSS

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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter