soy Kseso y esto EsCSS

4 tooltips y 4 enlaces en el mismo elemento en función del lado por donde hagas :hover

Cuatro tooltips por cada imagen, con enlaces distintos en cada uno y con contenidos diferentes en cada tooltip en función del lado por que hagamos :hover sobre la miniatura. Todo en puro Css.

4 tooltips y 4 enlaces en el mismo elemento en función del lado por donde hagas :hover

·Por Kseso ✎ 5

cuatro tooltips con un enlace cada uno en cada miniaturaEl recurso del tooltip o globo emergente es un recurso muy común para complementar la info sobre el elemento al hacer :hover sobre él. En la mayoría que conozco la cantidad de información extra es "una sóla", siempre la misma y no suele ser muy extensa por la propia naturaleza y función del tooltip. Y en casos como galerías, la miniatura es sólo un enlace.

Así que en el artículo vamos a ver cómo ofrecer cuatro tooltips por cada imagen, con enlaces distintos en cada uno y con contenidos diferentes en cada tooltip en función del lado por que hagamos :hover sobre la miniatura. Todo en puro Css.

Juega en la imagen de abajo, entra en la imagen por su lado izquierdo o derecho; por arriba o por abajo y observa. También puedes acercarte desde el centro a los lados (sin salir de la imagen).

El marcado Html

Como es lógico, si queremos tener cuatro enlaces con su diferente destino correspondiente e información asociada a cada uno, esto es lo que debemos incluir en el html además de la imagen común. Así que nada más simple que:

<div id="ejemplo"> <div class="multiples"> <a href="#">KsesoCss
puro CSS</a> <a href="#">11 meses
213 posts</a> <a href="#">en Blogger
desde 02-2012</a> <a href="#">Con licencia
Beerware</a> <img alt="galería múltiples tooltips y enlaces por cada imagen" src="tooltip_1.jpg" /> </div> </div>

La razón de colocar la imagen vía src="ruta" y no como fondo está en que la considero parte de la información, no del ornamento.

El Css asociado

Lo divertido viene ahora: jugar un poco con el Css. Así que vamos a ello. Lo primero es posicionar de forma absoluta cada uno de los enlaces y hacerlo de tal manera que una parte de cada enlace quede "dentro" del contenedor general y por lo tanto accesible al :hover.

El resultado buscado es el de la imagen:

Múltiples tooltips y cuatro enlaces al mismo elemento en función del lado por donde hagas :hover
div.multiples { float:left; position: relative; overflow: hidden; } div.multiples img { width: 100%; } div.multiples a { box-sizing: border-box; color: white; display: table-cell; height: 100%; opacity: 0; padding: 10% 0 0; position: absolute; text-align: center; width: 100%; transition: all 0.5s linear 0s; }

Observa que omito los prefijos privativos y algunas propiedades que no son necesarias. En el jsfiddle de arriba, en la pestaña "css" los tienes completo.

Ahora desplazamos cada uno de los enlaces para que queden desplazados cada uno a su lateral a la vez que declaramos un fondo diferente a cada uno para que sea más claro que son distintos. Para esto nos viene ni que pintados los selectores de número de hijo:

div.multiples a:nth-child(1) { background: rgba(0,0,0, 0.55); left: 0; top: -80%; } div.multiples a:nth-child(2) { background: rgba(255,0,0, 0.55); left: 90%; top: 0; } div.multiples a:nth-child(3) { background: rgba(0,128,0, 0.55); left: 0; top: 80%;; } div.multiples a:nth-child(4) { background: rgba(0,0,255, 0.55); left: -90%; top: 0; }

A estas alturas ya está hecho la mayor parte del trabajo. Sólo queda pendiente recolocar cada enlace en su sitio al hacer :hover sobre él, ocupando toda la imagen:

div.multiples a:hover { bottom: 0; left: 0 !important; opacity: 1; right: 0; top: 0 !important; }

Y eso es todo. Mucho más sencillo y simple de lo que parecería.

Una galería completa

Y como todo en css es susceptible de llevarlo un poco más allá, como primera extensión del efecto podríamos aplicarlo a una galería con thumbnails. Así en un mínimo de espacio (cada miniatura) podremos ofrecer más información y opciones.

Puedes ver la demo de abajo a pantalla completa en este pen.

Check out this Pen!

Ahora sólo es cuestión de que le pongas un poco de imaginación y juegues con el ejemplo a ver qué obtienes tú. Por ejemplo, mezclandolo con el efecto de ésta galería.
Y no te olvides de compartir tu juego u opinión en los comentarios.

Mejoras y variaciones por los usuarios

Hay usuarios del blog que han aceptado la invitación de hacer variaciones de este concepto y compartirlas. A continuación las iré incluyendo a medida que las vaya conociendo.

Chistian: tooltip 4x1

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso