Cómo Hacer Descripciones Emergentes Mágicas y Animadas Con CSS

() translation by (you can also view the original English article)

Las descripciones emergentes son una gran forma de mejorar una UI cuando tus usuarios necesitan contexto extra para ese elegante icono, o cuando quieren alguna seguridad para dar clic a un botón, o tal vez un subtitulo secreto para acompañar una imagen. Hagamos algunas descripciones emergentes animadas, justo ahora, con nada más que HTML y CSS.

Demostración

Aquí está hacia lo que estaremos trabajando:

Antes de sumergirte en la caldera, echemos un vistazo a lo que estaremos fabricando. La meta principal es tener una manera simple de agregar una descripción emergente, así que haremos eso usando un atributo tooltip personalizado:

1	<span tooltip="message">visible text or icon, etc.</span>

Un Nota Sobre Accesibilidad y Capacidad

Si estás buscando 508-complacientes descripciones emergentes, o necesitas descripciones emergentes más inteligentes con detección de colisión con contenedor y/o soporte para contenido HTML vs. texto plano, hay muchas soluciones que usan scripts de terceros para satisfacer esas necesidades por ti.

"JavaScript es imperativo para hacer componentes interactivos totalmente accesibles." -- Sara Soueidan, Construir descripciones emergentes de ayuda completamente accesibles...es más difícil de lo que pensé

Este tutorial no aborda específicamente necesidades de accesibilidad. Conoces a tus usuarios y lo que necesitan, así que asegúrate de considerar sus necesidades en este respecto también.

Establezcamos Algunas Expectativas

No se requiere JavaScript
Estaremos usando selectores de atributos (no nombres de clases), con el emparejamiento de patrón integrado de CSS
Agregar elementos DOM existentes (no se requieren nuevos elementos en tu marcado*)
Los ejemplos de código son libres de prefijos (agrega prefijos propietarios para tus navegadores meta si es necesario)
Asume paso del ratón/flotar para disparar las descripciones emergentes
Solo descripciones emergentes de texto plano (HTML, imágenes, etc. no están soportadas)
Animaciones sutiles mientras se invocan las descripciones emergentes

¡Muy bien! ¡Vamos a Rockear Este Barco!

Oh, espera. Tenemos un asterisco con el cuál lidiar primero, sobre "no necesitar ninguna marcado extra". Esto es mágico, después de todo. Nuestras descripciones emergentes realmente no necesitan ningunos elementos DOM extra ya que están hechos completamente de pseudo-elementos (las cosas ::before y ::after) que podemos controlar via CSS.

Si ya estás utilizando los pseudo-elementos de un elemento de otro conjunto de estilos y quieres una descripción emergente sobre ese elemento, entonces podrías necesitar reestructurar un poco.

¡No Hay Fiesta Como Una Fiesta de Descripción Emergente!

Espera. ¡Gremlins! Una advertencia más: posicionamiento CSS. Para que las descripciones emergentes funcionen apropiadamente, su elemento padre (la cosa a la que estamos adjuntando la descripción emergente) necesita ser

position: relative, o
position: absolute, o
position: fixed

Básicamente, cualquiera menos position: static --ese es el modo de posición por defecto asignado a prácticamente todos los elementos por el navegador. Las descripciones emergentes son posicionadas de manera absoluta así que necesitan conocer los límites en los cuáles su absolutes tiene significado. La directiva de posición por defecto static no declara sus propios límites y no dará a nuestras descripciones emergentes un contexto contra los cuales empujar, así que las descripciones emergentes usarán el siguiente elemento parental más cercano que tiene un límite declarado.

Necesitarás decidir cual directiva de posición funciona mejor con cómo estás usando las descripciones emergentes. Este tutorial asume position: relative para el elemento padre. Si tu UI depende en un elemento absolutamente posicionado, entonces alguna reestructura (marcado extra) podría ser necesaria para desplegar una descripción emergente sobre ese elemento.

Vayamos a ver qué pasa.

Selectores de Atributo; Un Recordatorio Rápido

La mayoría de reglas CSS están escritas con nombres de clases en mente, como .esta-cosa, pero CSS tiene un puñado de tipos de selectores. Nuestras descripciones emergentes mágicas van a usar selectores de atributo--esa es la notación de corchetes cuadrados:

1	[foo] {
2	background: rgba(0, 0, 0, 0.8);
3	color: #fff;
4	}

Cuando el navegador encuentra algo como esto:

1	<span foo>Check it out!</span>

sabrá que necesita aplicar las reglas [foo] porque la etiqueta <span> tiene un atributo llamado foo. En este caso, el span mismo tendría un fondo negro traslúcido con texto blanco.

Los elementos HTML tienen varios atributos integrados, pero también podemos hacer los propios. Como foo, o tooltip. Por defecto, HTML no sabe que significan estos, pero con CSS podemos decirle a HTML lo que esto significa.

¿Por Qué Selectores de Atributo?

Usaremos primariamente selectores de atributo para una separación de asuntos. Usar atributos sobre nombres de clase no nos da ningún punto extra en la guerra de la especificidad; las clases y atributos tienen la misma especificidad. Sin embargo, usando atributos podemos mantener nuestro contenido con el contenido ya que los atributos HTML pueden tener valores, mientras que las clases no.

Considera el nombre de clase .tooltip vs. el atributo [tooltip] en este código de ejemplo. El nombre de clase es uno de los valores para el atributo [class] mientras que el atributo tooltip tiene un valor, que es el texto que queremos mostrar.

1	<span class="tooltip another-classname">lorem ipsum</span>
2
3	<span tooltip="sit dolar amet">lorem ipsum</span>

Ahora Entrando a la Alquimia de las Descripciones Emergentes

Nuestras ventanas emergentes tienen dos atributos diferentes:

tooltip: esto contiene el contenido de la descripción emergente (una cadena de texto plano)
flow: opcional; esto nos permite controlar cómo exponer la descripción emergente. Hay muchas colocaciones que podríamos soportar pero cubriremos cuatro colocaciones comunes:
arriba, izquierda, derecha, abajo.

Ahora, preparemos el trabajo para todas las descripciones emergentes. Las reglas de los pasos 1-5 aplican para todas las descripciones emergentes sin importar qué flow les demos. Los pasos 6-7 tienen distinciones entre los diferentes valores de flow.

1. Relatividad

Esto es para el elemento padre de la descripción emergente. Asignemos una directiva de posición para que el posicionamiento absoluto de las partes de la descripción emergente (los pseudo-elementos ::before y ::after) sean posicionados en contexto para este elemento padre y no en contexto de la página completa o un elemento abuelo o algún otro elemento externo en el árbol DOM.

1	[tooltip] {
2	position: relative;
3	}

2. Hora Estelar del Pseudo-elemento

Es la hora estelar de los pseudo-elementos. Aquí estableceremos propiedades comunes para las piezas ::before y ::after. La propiedad content es lo que hace que el pseudo-elemento funcione, pero llegaremos ahí pronto.

[tooltip]::before,
[tooltip]::after {
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;

    /* opinions */
    text-transform: none; 
    font-size: .9em;
}

3. El Tonto

No sé porque "tonto" tiene sentido, pero siempre lo he llamado así. Esta es la pequeña parte triangular puntiaguda que da a las descripciones emergentes su sentir de burbuja de texto apuntando a la cosa de la cuál fueron invocadas. Nota que estamos usando transparent para el color de borde; agregaremos el color después ya que cómo lo agreguemos depende del flow de la descripción emergente.

[tooltip]::before {
    content: '';
    z-index: 1001;
    border: 5px solid transparent;
}

No es un error de dedo que la declaración content: ' '; tenga una cadena vacía por valor. No queremos nada ahí, pero necesitamos esa propiedad para que exista el pseudo-elemento.

Para hacer un triángulo estamos definiendo un borde sólido con algo de grosor sobre una caja vacía (sin contenido) sin ancho y sin altura, y solo dándole a un lado de la caja color de borde. Para más detalles revisa el siguiente tutorial:

CSS

Consejo Rápido: Dibujando y Usando Triángulos CSS

Joren Van Hee

4. ¡Burbujas!

Aquí está la carne de la cosa. Nota la parte content: attr(tooltip) diciendo, "Este pseudo-elemento debería usar el valor del atributo tooltip como su contenido." ¡Por esto usar atributos sobre clases de nombres es tan grandioso!

[tooltip]::after {
    content: attr(tooltip); /* magic! */
    z-index: 1000;
    
    /* most of the rest of this is opinion */
    font-family: Helvetica, sans-serif;
    text-align: center;
    
    /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* visible design of the tooltip bubbles */
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
}

Nota los valores z-index para el tonto y la burbuja. Estos son valores arbitrarios, pero ten en mente que un valor z-index es relativo. Significado: un valor z-index de 1001 dentro de un elemento con z-index de 3 solo significa que el elemento 1001 será el elemento de más arriba dentro del contenedor con z-index de 3.

El z-index de la burbuja debería ser al menos un paso más abajo del z-index del tonto. Si es el mismo o más alto que el del tonto, puedes terminar con un efecto de color inconsistente sobre el tonto si tus descripciones emergentes emplean un box-shadow.

Para un vistazo más detallado de la propiedad z-index, mira el siguiente tutorial:

CSS

Lo Que Tal Vez No Sepas Sobre la Propiedad Z-Index

Steven Bradley

5. Acción de Interacción

Nuestras descripciones emergentes son activadas pasando el ratón sobre el elemento con la descripción emergente...Casi.

1	[tooltip]:hover::before,
2	[tooltip]:hover::after {
3	display: block;
4	}

Si vuelves a ver nuestro bloque de estilo en el Paso 2, deberías ver que usamos opacity: 0; junto con display: none; para las partes de nuestra descripción emergente. Hicimos esto de manera que podamos usar efectos de animación CSS cuando las descripciones emergentes de muestren y oculten.

La propiedad display no puede ser animada, ¡pero opacity si! Lidiaremos con las animaciones al final. Si no te interesan las descripciones emergentes animadas, solo borra la declaración opacity: 0; del Paso 2 e ignora la animación en el Paso 7.

La última cosa que necesitaremos que aún aplica a todas la descripciones emergentes es una manera de suprimir una descripción emergente si no tiene contenido. Si estás poblando tus descripciones emergentes con algún sistema dinámico (Vue.js, Angular, React, PHP, etc.) ¡no queremos burbujas vacías!

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

6. Control de Flujo

Esta paso se puede volver complicado ya que usaremos algunos selectores no tan comunes para ayudar a nuestras descripciones emergentes a lidiar con sus emplazamientos basado en sus valores flow (o falta de).

"Cosas extrañas están en marcha en el Círculo-K" --- Ted Theodore Logan

Antes de saltar a los estilos, echemos un vistazo a algunos patrones de selector que estaremos usando.

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    /* ...
    properties: values
    ... */
}

Esto le está diciendo al navegador "Para todos los elementos con un atributo tooltip que no tengan un atributo flow, o tengan flow con un valor que comienza con 'up': aplica estos estilos a su pseudo-elemento ::before."

Estamos usando un patrón aquí así que estos pueden ser extendidos a otros flows sin necesidad de repetir tanto CSS. Este patrón flow^="up" está usando el emparejador ^= (comienza con). Esto permite a los estilos aplicar también a arriba-derecha y arriba-izquierda si quisieras agregar estos controles de flujo. No vamos a cubrir estos aquí, pero puedes verlos en uso en mi demo original de descripciones emergentes en CodePen.

Aquí están los bloques CSS para los cuatro flujos que cubre este tutorial.

Arriba (por defecto):

/* ONLY the ::before */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}

/* ONLY the ::after */
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

/* Both ::before & ::after */
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

Abajo:

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

Izquierda:

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

Derecha:

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

7. Anima Todas las Cosas

Las animaciones son increíbles. Las animaciones pueden:

ayudar a los usuarios a sentirse cómodos
ayudar a los usuarios con la conciencia especial de tu UI
llamar la atención a cosas que necesitan ser vistas
suavizar elementos de una UI que de otra manera tendrían un efecto binario de encendido/apagado discorde

Nuestras descripciones emergentes caen en la última descripción. En vez de que una burbuja de texto exista de repente y aparezca en un flash, hagámoslas más suaves.

@keyframes

Necesitaremos dos animaciones @keyframe. Las descripciones emergentes arriba/abajo usarán el fotograma tooltips-vert, y las descripciones emergentes izquierda/derecha usarán el fotograma tooltips-horz. Nota en ambos de estos fotogramas que solo estamos definiendo el estado final deseado de las descripciones emergentes. No necesitamos saber de donde vienen (las descripciones emergentes mismas tienen esa información de estilo). Solo queremos controlar a donde irán.

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

Ahora, necesitamos aplicar estos fotogramas a las descripciones cuando un usuario pasa sobre los elementos disparadores (los elementos con atributos [tooltip]). Ya que estamos empleando varios flujos para controlar como se mostrarán las descripciones emergentes, necesitamos identificar esas posibilidades en los estilos.

Usa :hover para Pasar Control a Animaciones

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: 
        tooltips-vert 
        300ms 
        ease-out
        forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: 
        tooltips-horz 
        300ms 
        ease-out 
        forwards;
}

Recuerda que no podemos animar la propiedad display, pero podemos darle a las descripciones emergentes un efecto de desvanecimiento manipulando opacity. También estamos animando la propiedad transform que da a las descripciones emergentes un movimiento sutil como si estuvieran volando al punto de sus elementos disparadores.

Nota la palabra clave forwards en la declaración de animación. Esto le dice a la animación que no se reinicie una vez que se complete, sino que continúe adelante y se quede en el final.

Conclusión

¡Fantástico trabajo! Cubrimos mucho en este tutorial, y ahora tenemos una estupenda colección de descripciones emergentes para mostrar nuestro arduo trabajo:

Solo hemos rascado la superficie de lo que puede hacerse con descripciones emergentes CSS. ¡Diviértete jugando con ellas y sigue experimentando e inventando tus propias recetas!