Share
La información sobre herramientas es una excelente manera de mejorar una interfaz de usuario cuando los usuarios necesitan un contexto adicional para ese ícono de fantasía, o cuando desean cierta seguridad para hacer clic en un botón, o tal vez un título de Huevo de Pascua para acompañar una imagen. Hagamos algunos tooltips animados, ahora mismo, con nada más que HTML y CSS.
Esto es para lo que estamos trabajando:
Antes de sumergirnos en el caldero, echemos un vistazo a lo que realmente estamos elaborando. El objetivo principal es tener una forma sencilla de agregar una información sobre herramientas, así que lo haremos agregando una información sobre herramientas atributo:
Accentsconagua
texto o icono visible, etc..Si busca información sobre herramientas compatible con 508, o necesita información sobre herramientas más inteligente con detección de colisiones de contenedores y / o soporte para contenido HTML en lugar de texto sin formato, hay muchas soluciones que utilizan scripts de terceros para resolver esas necesidades para usted..
"JavaScript es imprescindible para crear componentes interactivos totalmente accesibles". - Sara Soueidan, Crear una herramienta de ayuda totalmente accesible ... es más difícil de lo que pensé
Este tutorial no aborda específicamente las necesidades de accesibilidad. Conoces a tus usuarios y lo que necesitan, así que asegúrate de considerar sus necesidades al respecto también.
Oh espera. Tenemos un asterisco con el que tratar primero, acerca de "no necesitar ningún margen de beneficio adicional". Esto es magia, después de todo. Nuestra información sobre herramientas no De Verdad necesita elementos DOM adicionales, ya que están compuestos completamente de pseudo-elementos (los ::antes de y ::después cosas) que podemos controlar a través de CSS.
Si ya está utilizando los pseudo-elementos de un elemento de otro conjunto de estilos y desea una información sobre herramientas en ese elemento, entonces es posible que deba reestructurar un pequeño poco.
Espere. ¡Gremlins! Una advertencia más: Posicionamiento CSS. Para que la información sobre herramientas funcione correctamente, su elemento principal (la cosa a la que adjuntamos la información sobre herramientas) debe estar
posición: relativo, oposición: absoluta, oposición: fijoBásicamente, cualquier otra cosa que no sea posición: estática - ese es el modo de posición predeterminado asignado a casi todos los elementos por el navegador. La información sobre herramientas está posicionada de manera absoluta y, por lo tanto, necesitan conocer los límites en los que su sentido absoluto tiene sentido. La directiva de posición por defecto estático no declara sus propios límites y no le dará a nuestras informaciones sobre herramientas un contexto para empujar contra, por lo que las sugerencias sobre herramientas utilizarán el siguiente elemento parental más cercano que tenga un límite declarado.
Tendrá que decidir qué directiva de posición funciona mejor con la forma en que está utilizando la información sobre herramientas. Este tutorial asume posición: relativo para el elemento padre. Si su UI se basa en un elemento absolutamente posicionado, entonces también puede ser necesaria alguna reestructuración (marcado adicional) para implementar una información sobre herramientas en ese elemento..
Vamos a saltar y ver qué pasa.
La mayoría de las reglas de CSS están escritas con nombres de clase en mente, como .esta cosa, pero CSS tiene un puñado de tipos de selector. Nuestra información sobre herramientas mágica va a utilizar selectores de atributos, esa es la notación de corchete:
[foo] fondo: rgba (0, 0, 0, 0.8); color: #fff;
Cuando el navegador encuentra algo como esto:
Echale un vistazo!Sabrá que necesita aplicar el [foo] gobierna porque eso etiqueta tiene un atributo llamado foo. En este caso, el tramo en sí tendría un fondo negro translúcido con texto blanco.
Los elementos HTML tienen varios atributos incorporados, pero también podemos crear los nuestros. Me gusta foo, o información sobre herramientas. Por defecto, HTML no sabe qué significan, pero con CSS podemos decirle a HTML qué significa esto..
Usaremos selectores de atributos principalmente para una separación de inquietudes. El uso de atributos sobre los nombres de clase no nos otorga ningún punto de bonificación en las guerras de especificidad; Las clases y los atributos tienen la misma especificidad. Sin embargo, al usar atributos podemos mantener nuestro contenido con el contenido, ya que los atributos HTML pueden tener valores, mientras que los nombres de clase no.
Considera el nombre de clase .información sobre herramientas vs. el atributo [información sobre herramientas] en este código de ejemplo. El nombre de clase es Uno de los valores para el atributo. [clase] mientras que el atributo de información sobre herramientas tiene Un valor, que es el texto que queremos mostrar..
lorem ipsum lorem ipsum
Nuestra información sobre herramientas utilizará dos atributos diferentes:
información sobre herramientas: esto contiene el contenido de la información sobre herramientas (una cadena de texto sin formato)fluir: Opcional; Esto nos permite controlar cómo exponer la información sobre herramientas. Podríamos apoyar muchas ubicaciones, pero cubriremos cuatro ubicaciones comunes:Ahora, vamos a configurar el trabajo de fondo para todas las informaciones sobre herramientas. Las reglas de los pasos 1 a 5 se aplican a todas las informaciones sobre herramientas, independientemente de qué fluir les damos Los pasos 6-7 tienen distinciones entre los diversos fluir valores.
Esto es para el elemento padre de la información sobre herramientas. Asignemos una directiva de posición para que el posicionamiento absoluto de las partes de la información sobre herramientas (la ::antes de y ::después pseudo-elementos) se colocan en el contexto de este elemento padre y no en el contexto de la página en general o un elemento de abuelo o algún otro elemento externo hasta el árbol DOM.
[información sobre herramientas] posición: relativo;
Es hora de cebar los pseudo-elementos. Aquí vamos a establecer propiedades comunes tanto para el ::antes de y ::después piezas. los contenido la propiedad es lo que realmente hace funcionar un pseudo-elemento, pero llegaremos pronto.
[tooltip] :: before, [tooltip] :: after line-height: 1; selección de usuario: ninguna; punteros-eventos: ninguno; posición: absoluta; pantalla: ninguna; opacidad: 0; / * opiniones * / texto-transformar: ninguno; tamaño de letra: .9em;
No sé por qué "dink" tiene sentido, siempre lo he llamado así. Esta es la parte puntiaguda del pequeño triángulo que le da a la información sobre herramientas su burbuja de diálogo siente al señalar lo que lo invocó. Note que estamos usando transparente por el color del borde; agregaremos el color más adelante, ya que la forma en que lo agregamos depende de la información sobre herramientas. fluir.
[información sobre herramientas] :: antes contenido: "; índice z: 1001; borde: 5px sólido transparente;
No es un error tipográfico que el contenido:"; La declaración tiene una cadena vacía para un valor. No queremos nada allí, pero sí necesitamos esa propiedad para que exista el pseudo-elemento.
Para hacer un triángulo, estamos definiendo un borde sólido con algo de grosor en un cuadro vacío (sin contenido) sin ancho ni altura, y solo le damos un color de borde a un lado del cuadro. Para más detalles revisa el siguiente tutorial:
Aquí está la carne de la cosa. Observe la contenido: attr (información sobre herramientas) parte diciendo: "Este pseudo-elemento debe usar el valor de la información sobre herramientas atributo como su contenido. "Es por eso que usar atributos sobre los nombres de clase es tan grande!
[información sobre herramientas] :: después de contenido: attr (información sobre herramientas); /* ¡mágico! * / z-index: 1000; / * la mayor parte del resto de esto es opinión * / font-family: Helvetica, sans-serif; text-align: center; / * Deje que el contenido establezca el tamaño de la información sobre herramientas, pero esto también evitará que sean desagradables * / min-width: 3em; ancho máximo: 21em; espacio en blanco: nowrap; desbordamiento: oculto; desbordamiento de texto: puntos suspensivos; / * diseño visible de las burbujas de información sobre herramientas * / relleno: 1 canal 1.5 canales; radio del borde: .3ch; caja-sombra: 0 1em 2em -.5em rgba (0, 0, 0, 0.35); fondo: # 333; color: #fff;
Observe la índice z Valores tanto para el dink como para la burbuja. Estos son valores arbitrarios, pero tenga en cuenta que una índice z El valor es relativo. Significado: un valor de índice z de 1001 dentro de un elemento con un índice z de 3 significa que el elemento 1001 será el elemento más alto dentro ese índice z: 3 envase.
La burbuja de índice z Debe estar al menos un paso por debajo del dink índice z. Si es igual o más alto que el dink, puedes terminar con un efecto de color inconsistente en el dink si la información sobre herramientas emplea una sombra de la caja.
Para obtener una descripción más detallada de la propiedad z-index, consulte el siguiente tutorial:
Nuestra información sobre herramientas se activa al colocar el mouse sobre el elemento con la información sobre la herramienta ... Casi.
[información sobre herramientas]: hover :: before, [información sobre herramientas]: hover :: after display: block;
Si miras hacia atrás a nuestro bloque de estilo en el Paso 2, deberías ver que hemos usado opacidad: 0; junto con pantalla: ninguna; para nuestras piezas de herramientas. Hicimos esto para poder usar los efectos de animación CSS cuando la información sobre herramientas se muestra y se esconde..
los monitor La propiedad no puede ser animada, pero opacidad ¡puede! Nos ocuparemos de las animaciones al final. Si no te importa la información sobre herramientas animada, simplemente borra la opacidad: 0; Declaración del Paso 2 e ignora la animación en el Paso 7.
Lo último que necesitaremos y que aún se aplica a todas las informaciones sobre herramientas es una forma de suprimir una información sobre herramientas si no tiene contenido. Si está poblando información sobre herramientas con algún tipo de sistema dinámico (Vue.js, Angular o React, PHP, etc.) no queremos burbujas vacías tontas!
/ * no muestra información sobre herramientas vacía * / [tooltip = "] :: before, [tooltip ="] :: after display: none! important;
Este paso puede ser bastante complicado, ya que usaremos algunos selectores no tan comunes para ayudar a que nuestra información sobre herramientas se ocupe de sus ubicaciones en función de sus fluir valores (o falta de ellos).
"Cosas extrañas están en marcha en el Circle-K". - Ted Theodore Logan
Antes de saltar a los estilos, echemos un vistazo a algunos patrones de selección que usaremos.
[información sobre herramientas]: no ([flujo]) :: antes, [información sobre herramientas] [flujo ^ = "arriba"] :: antes / *… propiedades: valores… * /
Esto le dice al navegador: "Para todos los elementos con una información sobre herramientas atribuir que o bien no haga tener un fluir atributo, o tener un fluir con un valor que comienza con 'arriba': aplicar estos estilos a su ::antes de pseudo-elemento ".
Estamos usando un patrón aquí para que puedan extenderse a otros flujos sin necesidad de repetir tanto CSS. Este patrón fluir ^ = "arriba" está usando el ^ = (comienza con) matcher. Esto permite que los estilos también se apliquen a vertical y arriba a la izquierda Si desea agregar esos controles de flujo. No los cubriremos aquí, pero puede verlos en uso en mi demostración de información sobre herramientas original en CodePen.
Aquí están los bloques CSS para los cuatro flujos que cubre este tutorial..
/ * SÓLO el :: antes * / [información sobre herramientas]: no ([flujo]) :: antes, [información sobre herramientas] [flujo ^ = "arriba"] :: antes abajo: 100%; ancho de borde inferior: 0; color de borde superior: # 333; / * SOLO el :: 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%; transformar: traducir (-50%, -.5em);
[información sobre herramientas] [flujo ^ = "abajo"] :: antes de arriba: 100%; ancho del borde superior: 0; color de borde inferior: # 333; [información sobre herramientas] [flujo ^ = "abajo"] :: después de arriba: calc (100% + 5px); [tooltip] [flow ^ = "down"] :: before, [tooltip] [flow ^ = "down"] :: after left: 50%; transformar: traducir (-50%, .5em);
[información sobre herramientas] [flujo ^ = "izquierda"] :: antes de arriba: 50%; ancho de borde derecho: 0; color de borde izquierdo: # 333; izquierda: calc (0em - 5px); transformar: traducir (-. 5em, -50%); [información sobre herramientas] [flujo ^ = "izquierda"] :: después de arriba: 50%; derecha: calc (100% + 5px); transformar: traducir (-. 5em, -50%);
[información sobre herramientas] [flujo ^ = "derecho"] :: antes de arriba: 50%; ancho de borde izquierdo: 0; color de borde derecho: # 333; derecha: calc (0em - 5px); transformar: traducir (.5em, -50%); [información sobre herramientas] [flujo ^ = "derecho"] :: después de arriba: 50%; izquierda: calc (100% + 5px); transformar: traducir (.5em, -50%);
Las animaciones son increíbles. Las animaciones pueden:
Nuestra información sobre herramientas caerá en esa última descripción. En lugar de tener una burbuja de texto emergente y aparecer en un instante, hagámoslos más suave.
Necesitaremos dos @keyframe animaciones La información sobre herramientas arriba / abajo utilizará la tooltips-vert fotograma clave, y la información sobre herramientas izquierda / derecha utilizará la tooltips-horz fotograma clave Observe que en estos dos fotogramas clave solo estamos definiendo el estado final deseado de la información sobre herramientas. No necesitamos saber de dónde vienen. desde (Las informaciones sobre herramientas tienen esa información de estilo). Solo queremos controlar donde van a.
@keyframes tooltips-vert to opacity: .9; transformar: traducir (-50%, 0); @keyframes tooltips-horz to opacity: .9; transformar: traducir (0, -50%);
Ahora, debemos aplicar estos fotogramas clave a la información sobre herramientas cuando un usuario se desplaza sobre los elementos desencadenantes (los elementos con la [información sobre herramientas] atributos). Ya que estamos empleando varios flujos para controlar cómo se mostrarán las sugerencias de herramientas, necesitamos identificar esas posibilidades en los estilos.
[información sobre herramientas]: not ([flujo]): hover :: before, [información sobre herramientas]: not ([flow]): hover :: after, [información sobre herramientas] [flow ^ = "up"]: hover :: before, [ información sobre herramientas] [flow ^ = "up"]: hover :: after, [tooltip] [flow ^ = "down"]: hover :: before, [tooltip] [flow ^ = "down"]: hover :: after Animación: tooltips-vert 300ms easy-out hacia adelante; [tooltip] [flow ^ = "left"]: hover :: before, [tooltip] [flow ^ = "left"]: hover :: after, [tooltip] [flow ^ = "right"]: hover :: antes, [tooltip] [flow ^ = "right"]: hover :: after animation: tooltips-horz 300ms se desplaza hacia adelante;
Recuerda que no podemos animar el monitor propiedad, pero podemos darle a la información sobre herramientas un efecto de fundido manipulando el opacidad. También estamos animando la propiedad de transformación que le da a la información sobre herramientas un movimiento sutil como si estuvieran volando para apuntar a sus elementos disparadores..
Observe la hacia adelante Palabra clave 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 debe seguir adelante y permanecer al final.
¡Trabajo fantástico! Cubrimos mucho en este tutorial, y ahora tenemos una buena colección de información sobre herramientas para mostrar nuestro arduo trabajo:
Solo hemos arañado la superficie de lo que se puede hacer con información sobre herramientas CSS. Diviértete jugando con ellos y sigue experimentando y preparando tus propias recetas.!
