Cómo mostrar, posicionar y diseñar una información sobre herramientas en HTML y CSS?

Se conoce una información sobre herramientas como un elemento que proporciona información adicional sobre un elemento HTML. Esta información adicional se muestra cada vez que el usuario trae el cursor del mouse sobre ese elemento particular. Estas información sobre herramientas juegan un papel importante en la actualización de un diseño web porque el uso de ellos le impedirá mostrar cualquier información adicional en la página web que de otra manera no se vea bien. En este artículo, iluminaremos cómo mostrar, posicionar y diseñar una información sobre herramientas en HTML y CSS.

Antes de sumergirnos en otros detalles sobre una información sobre herramientas, primero aprendamos cómo crear una información sobre herramientas primario.

Cómo crear/mostrar una información sobre herramientas

El siguiente ejemplo demuestra cómo crear una información básica.

Html

Trae mouse sobre mí Texto de información sobre herramientas

En el código anterior, hemos creado un elemento div y colocamos un poco de contenido dentro de él y usando un elemento SPAN estamos agregando un texto de información sobre herramientas dentro del elemento DIV. Tenga en cuenta que al DIV se le ha asignado la información de herramientas de clase, mientras tanto, el elemento SPAN ha recibido la clase ToolTipText de clase.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;
Posición: Absoluto;
índice z: 1;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;

Aquí estamos dando al elemento DIV una posición relativa para colocar el texto de la información sobre herramientas y mostrándolo como un elemento de bloque en línea para que la información sobre herramientas se coloque justo al lado del elemento Div. Además, con respecto a ese div, estamos ajustando la posición de la información sobre herramientas como absoluto. Además, la visibilidad de la información sobre herramientas está oculta, pero cuando el cursor del mouse se presenta sobre el elemento div, la información sobre la herramienta será visible.

Producción

Se ha creado una información sobre herramientas con éxito.

Ahora que sabemos cómo hacer una información sobre herramientas, exploremos cómo colocar la información sobre herramientas.

Cómo colocar una información sobre herramientas

Hay cuatro tipos de posiciones que puede asignar a una información sobre herramientas y se mencionan a continuación.

1. Arriba
2. Abajo
3. Izquierda
4. Bien

Todas estas posiciones se demuestran a continuación con la ayuda de ejemplos.

Cómo colocar una información sobre herramientas en la parte superior

Con el fin de colocar una información sobre herramientas en la parte superior, vamos a usar el ejemplo utilizado anteriormente.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;
/ * Para establecer la posición superior de la información sobre herramientas */
Posición: Absoluto;
índice z: 1;
Abajo: 100%;
Izquierda: 60%;
margen -izquierda: -65px;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;

Con el fin de colocar la información sobre herramientas, estamos utilizando el valor absoluto de la propiedad de posición para que pueda colocarse con respecto al elemento DIV. Además, para colocarlo frente al elemento, le estamos dando un pedido de pila de 1 utilizando la propiedad del índice Z. Además, para colocarlo exactamente por encima del elemento, hemos establecido las propiedades inferiores, izquierdas y de margen-izquierda.

Producción

La información sobre herramientas ha recibido la posición superior.

Cómo colocar una información sobre herramientas en la parte inferior

Para colocar una información sobre herramientas en la parte inferior, considere el ejemplo a continuación.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;/ * para establecer la posición inferior de la información sobre herramientas */
Posición: Absoluto;
índice z: 1;
Top 100%;
Izquierda: 60%;
margen -izquierda: -65px;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;

El valor absoluto de la propiedad de posición posiciona la información sobre herramientas con respecto al elemento DIV. Además, el orden de la pila de la información sobre herramientas se establece en 1 para colocarlo frente al contenedor Div. Además, para colocarlo exactamente debajo del elemento, hemos establecido las propiedades de la parte superior, izquierda y de margen-izquierda.

Producción

La información sobre herramientas se ha colocado en la parte inferior.

Cómo colocar una información sobre herramientas a la izquierda

Si desea colocar su información sobre herramientas a la izquierda de un elemento, consulte el ejemplo a continuación.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;
/ * Para establecer la posición izquierda de la información sobre herramientas */
Posición: Absoluto;
índice z: 1;
arriba: -6px;
Derecha: 102%;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;

Aparte de la posición y las propiedades del índice Z, también estamos utilizando las propiedades superior y derecha para colocar la información sobre herramientas exactamente a la izquierda del elemento especificado.

Producción

Colocó con éxito la información sobre herramientas a la izquierda.

Cómo colocar una información sobre herramientas a la derecha

Aquí hemos demostrado cómo puede colocar una información sobre herramientas a la derecha de un elemento.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;/ * para establecer la posición correcta de la información sobre herramientas */
Posición: Absoluto;
índice z: 1;
arriba: -6px;
Izquierda: 102%;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;

Aquí estamos utilizando las propiedades superior e izquierda para establecer la posición de la información sobre herramientas a la derecha de un elemento.

Producción

La información sobre herramientas se ha ajustado a la derecha.

Cómo diseñar una información sobre herramientas

En los ejemplos anteriores, hemos diseñado la información sobre herramientas utilizando algunas propiedades básicas de CSS, como color de fondo, color, alineación de texto, radio fronterizo y relleno. Sin embargo, hay otras formas de diseñar una información sobre herramientas también. Aquí te hemos mostrado algunos de ellos.

Agregar una flecha a la información sobre herramientas

Con el fin de agregar una flecha, como un discurso de burbujas, considere el ejemplo a continuación.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;
Posición: Absoluto;
índice z: 1;
Abajo: 150%;
Izquierda: 50%;
margen -izquierda: -60px;

.comedia de herramientas .ToolTipText :: After
contenido: "";
Posición: absoluto;/ * para colocar la información sobre herramientas */
Top 100%;
Izquierda: 50%;
margen -izquierda: -6px;
/ * Para agregar una flecha */
borde: 6px sólido;
Color de la frontera: Rosybrown transparente transparente transparente;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;

Aquí estamos utilizando: después del pseudo-elemento para mostrar la flecha desde un lado particular de la información sobre herramientas, por lo tanto, el contenido después de la información sobre la herramienta se deja vacía. Sin embargo, para crear la flecha, se utiliza la propiedad fronteriza. Para mantener la flecha en el centro de la información sobre la herramienta, las propiedades de ancho de borde y margen-izquierda deben tener la misma pero opuesta en los valores de signo.

Estamos utilizando la propiedad del color del borde para dar color a cada borde de la flecha. Solo el borde superior tiene el color Rosybrown y el resto está configurado en transparente. Si a todos se les diera algo de color, la flecha aparecería como un cuadrado.

Por último, la información sobre herramientas y la flecha se han colocado sobre el elemento. Si desea colocar la información sobre herramientas junto con una flecha a cualquier otra posición, consulte los ejemplos dados anteriormente.

Producción

Se agregó con éxito una flecha a la información sobre herramientas.

Cómo agregar un efecto de desvanecimiento al comedia de herramientas

Para dar un cierto efecto, por ejemplo, un efecto de desvanecimiento para la información sobre herramientas, considere el ejemplo a continuación.

CSS

.Tooltip
Posición: relativo;
Pantalla: bloque en línea;

.comedia de herramientas .ToolTiptext
Visibilidad: oculto;
Color de fondo: Rosybrown;
color blanco;
Border-Radius: 7px;
relleno: 5px 10px;
Posición: Absoluto;
índice z: 1;
Abajo: 150%;
Izquierda: 50%;
margen-izquierda: -60px;/ * para agregar un efecto de desvanecimiento al tooltip */
Opacidad: 0;
Transición: Opacidad 2S;

.Tooltip: flotante .ToolTiptext
Visibilidad: visible;
Opacidad: 1;

En el código anterior, para que la información sobre herramientas se desvanezca cuando el mouse se cierne sobre el elemento, la propiedad de transición se usa junto con la propiedad de opacidad. La duración de la transición se ha establecido en 2 segundos, lo que significa que la información sobre la herramienta tardará en ser invisible a completamente visible.

Producción

El efecto de desvanecimiento funciona correctamente.

Conclusión

Se conoce una información sobre herramientas como un elemento que proporciona información adicional sobre un elemento cada vez que se presenta un cursor del mouse sobre ese elemento. Para agregar una información sobre herramientas en un elemento, la propiedad de posición se utiliza en función de la ubicación donde desea mostrar la información sobre herramientas. Además de esto, puede agregar una flecha o un efecto de desvanecimiento al tool-tit para darle algo de estilo. En este artículo, hemos iluminado cómo mostrar, posicionar y diseñar una información sobre herramientas usando HTML y CSS.