Una guía paso a paso para crear información sobre herramientas de CSS puro

Recientemente trabajé en un breve tutorial sobre cómo crear información sobre herramientas simples usando CSS puro (y sin elementos HTML o JavaScript adicionales). Más tarde usé esta técnica en mi propio proyecto, y descubrí algunos trucos para mejorarla.

Este artículo es un tutorial paso a paso que lo ayudará a comprender estos trucos de CSS para que también pueda crear información sobre herramientas de CSS puro.

Al final de esta publicación, sabrá cómo agregar información sobre herramientas a cualquier elemento agregando un atributo simple.

El problema

Necesitaba crear una información sobre herramientas personalizada para mi proyecto.

Comencé buscando en Google "CSS Tooltip Generator". Encontré bastantes generadores. Su enfoque consistía en agregar un tramo con una posición absoluta dentro del elemento para el que desea obtener información sobre herramientas.

Pero ya tenía un proyecto completo. No quería volver y agregar todos estos elementos de extensión a lo largo de mi proyecto. Esto llevaría tiempo y complicará mi HTML. Tenía que haber una mejor manera.

Por fin, encontré un tutorial increíble en YouTube sobre información sobre herramientas. El truco inteligente que usó fue crear una información sobre herramientas usando los selectores CSS :: before y :: after. Puedes ver el vídeo aqui.

Este truco es inteligente y limpio, pero no fue lo suficientemente genérico.

Mejorando la solución

En esta parte, haré este truco más genérico y descubriremos más sobre algunas propiedades CSS. Esto es lo que en última instancia queremos poder hacer:

No solo eso, sino que queremos poder especificar fácilmente la posición de la información sobre herramientas:

Primero, como se menciona en el video, agregaremos un pseudo elemento anterior y posterior al botón.

:: after y :: before son pseudo-elementos, que le permiten insertar contenido en una página desde CSS antes o después del contenido del elemento. Funcionan así:

div :: después de {
 contenido: "después";
}
div :: antes de {
 contenido: "antes";
}

El resultado se parece a esto:

 antes de    después

Pasemos por este paso a paso

Paso 1: agregaremos un atributo de información sobre herramientas como este:

Necesitamos :: after y :: before pseudo-elementos. Estos serán un rectángulo simple con el contenido de la información sobre herramientas. Creamos un rectángulo simple con CSS agregando un borde alrededor de un elemento vacío que creamos con la propiedad de contenido.

El pseudo-elemento :: before se usa para mostrar el contenido de información sobre herramientas. Lo agregamos con el contenido de la propiedad y extraemos el valor del atributo de información sobre herramientas. El valor del contenido puede ser una cadena, un valor de atributo del elemento como nuestro ejemplo, o incluso una imagen con url (ruta / imagen.png).

Para que esto funcione, la posición del elemento del botón debe ser relativa. En otras palabras, la posición de todos los elementos dentro del botón es relativa a la posición del elemento del botón en sí.

Agregamos también algunos trucos de posición para hacer que la información sobre herramientas en el centro con la propiedad de transformación y este sea el resultado.

Aquí está nuestro CSS:

Paso 2: solo jugamos con los pseudoelementos :: before y :: after para crear una posición de información sobre herramientas. Nuestro botón HTML se verá así:


La posición de información sobre herramientas puede ser: derecha, izquierda, superior o inferior.

Paso 3: en este último paso, agregaremos una animación de desplazamiento simple a la información sobre herramientas.

Este CodePen muestra el resultado final (y puede hacer clic para ver el código final):

Si está familiarizado con React, consulte Mi publicación:

¡Gracias por leer! Si crees que otras personas deberían leer esto, presiona el botón , tuitea y comparte la publicación. Recuerda seguirme en Medium para que puedas recibir notificaciones sobre mis publicaciones futuras.

Leer más historias https://elazizi.com/