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 simple usando CSS puro (y sin elementos HTML o JavaScript adicionales). Más tarde utilicé 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 una 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 fue agregar un intervalo con una posición absoluta dentro del elemento para el que desea una información sobre herramientas.

Pero ya tenía un proyecto completo. No quería volver atrás y agregar todos estos elementos de tramo a lo largo de mi proyecto. Esto llevaría tiempo y complicaría 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 utilizó fue crear una información sobre herramientas usando los selectores :: beforey :: afterCSS. Puedes ver el vídeo aqui.

Este truco era inteligente y limpio, pero no era 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 de CSS. Esto es lo que finalmente queremos poder hacer:

 click here !! 

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

 click here !! 

Primero, como se menciona en el video, agregaremos un beforey un afterpseudo elemento al botón.

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

div::after { content: “after”;}div::before { content: “before”;}

El resultado se parece a esto:

 before after 

Repasemos este paso a paso

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

 click Me !!  

Necesitamos ::aftery ::beforepseudo-elementos. Estos serán un simple rectángulo 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 contentpropiedad.

El ::beforepseudoelemento se utiliza para mostrar el contenido de la información sobre herramientas. Lo agregamos con la propiedad contenty 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(path/image.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 propio elemento del botón.

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

Aquí está nuestro CSS:

Paso 2: que acabamos de jugar con los ::beforey ::afterpseudo-elementos para crear una posición de información de herramientas. Nuestro botón HTML se verá así:

 click here !! 

La posición de la información sobre herramientas puede ser: derecha, izquierda, arriba o abajo.

Paso 3 : en este paso final, 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:

¿Presentamos reactjs-popup? - Modales, información sobre herramientas y menús: todo en uno

Este artículo trata sobre darle una descripción general simple de lo que puede hacer con reactjs-popup y cómo usarlo de manera efectiva .

¡Gracias por leer! Si cree que otras personas deberían leer esto, presione? botón, tuitear y compartir la publicación. Recuerda seguirme en Medium para que puedas recibir notificaciones sobre mis publicaciones futuras.

Leer más historias //elazizi.com/