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

xPor 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

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 Don Kseso Kseso

Comentarios: 5

  1. Excelente, solo le faltaría algo que diga que están ahí los tooltip, como una flechita.

    Y sólo como observación es que funciona muy bien con el giro horario hasta llegar al cuarto tooltip, y luego hay que salir de la imagen para retomar el efecto, supongo que debido a la posición en el html.
    Me gustó, voy a jugar un rato con él.

    Saludos

    ResponderEliminar
  2. Hola Cristian
    Gracias por la visita y las buenas palabras.

    Sí. Como bien dices le falta mucho para poder "pasar a producción". Es sólo un juego, una propuesta o concepto. Y a partir de él, pulirlo.

    Siempre puedes recurrir a los pseudoelementos para introducir ese "aquí hay algo" y cambiar opacity:0 por visibility y que cada enlace al desplegarse no cubra los laterales de los otros 3. Por ejemplo.

    Si lo mejoras no te olvides de pasarte por aquí a mostrarnoslo.

    Un saludo

    ResponderEliminar
  3. Hola kseso, no creo que sea una mejora pero bue allá va:
    http://jsfiddle.net/c2am/nscTN/2/embedded/result/

    Sobre la base del ejemplo de ksesocss

    Descripción:
    Cuatros tooltips que se pueden acceder desde las esquinas de la imagen.
    También se pueden mostrar parcialmente ubicando el puntero del mouse en el centro de la imagen para luego hacer hover sobre el Tooltips que nos interese.

    Creo que esto ya lo he visto, o tal vez no, con lo cual quiero decir que la idea tal vez no sea muy original, pero no es un copipaste, excepto la base de kseso debidamente aclarado al inicio, y por lo cual será enviada la respectiva cerveza a la brevedad.

    Saludos

    ResponderEliminar
  4. Gracias Cristian... por la cerveza, digo xD

    Interesante la propuesta y creativo el "hey! aquí hay..."
    La incluyo en el artículo con el enlace a tu comentario.

    Gracias también por la demo ;-}
    Un saludo

    ResponderEliminar
  5. Excelente, y explicación paso a paso, que más se puede pedir, gracias !

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap