in

Información sobre herramientas CSS


Cree información sobre herramientas con CSS.


Demostración: ejemplos de información sobre herramientas

Una información sobre herramientas se usa a menudo para especificar información adicional sobre algo cuando el usuario mueve el puntero del mouse sobre un elemento:


Información sobre herramientas básica

Cree una información sobre herramientas que aparece cuando el usuario mueve el mouse sobre un elemento:

Ejemplo


/ * Contenedor de información sobre herramientas * /
.tooltip {
posición: relativa;

pantalla: bloque en línea;
borde inferior: 1 px punteado en negro; / * Si quieres puntos debajo del texto flotante * /
}

/ * Texto de información sobre herramientas * /
.tooltip .tooltiptext {
visibilidad: oculta;
ancho: 120px;

color de fondo: negro;
color: #fff;
alineación de texto: centro;
relleno: 5px 0;

radio del borde: 6px;

/ * Coloque el texto de la información sobre herramientas; consulte los ejemplos a continuación. * /
posición: absoluta;
índice z: 1;
}

/ * Muestra el texto de la información sobre herramientas cuando pasas el mouse sobre el contenedor de información sobre herramientas * /
.tooltip: hover .tooltiptext {
visibilidad: visible;
}

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Ejemplo explicado

HTML: Use un elemento contenedor (como

) y agregue el
"tooltip" clase a eso. Cuando el usuario pasa el mouse sobre este

, se mostrará el texto de información sobre herramientas.

El texto de la información sobre herramientas se coloca dentro de un elemento en línea (como ) con class="tooltiptext".

CSS: los tooltip uso de clase position:relative, que es necesario para colocar el texto de información sobre herramientas (position:absolute).
Nota: Vea ejemplos a continuación sobre cómo colocar la información sobre herramientas.

los tooltiptext La clase contiene el texto de información sobre herramientas real. Está oculto de forma predeterminada y será visible al pasar el mouse (ver más abajo). También le hemos agregado algunos estilos básicos: ancho de 120 px, color de fondo negro, color de texto blanco, texto centrado y relleno superior e inferior de 5 px.

El CSS border-radius La propiedad se utiliza para agregar esquinas redondeadas al texto de información sobre herramientas.

los :hover selector se utiliza para mostrar el texto de información sobre herramientas cuando el usuario mueve el mouse sobre el

con class="tooltip".



Información sobre herramientas de posicionamiento

En este ejemplo, la información sobre herramientas se coloca a la derecha (left:105%) del texto «hoverable» (

). También tenga en cuenta que top:-5px se utiliza para colocarlo en el medio de su elemento contenedor. Usamos el numero 5 porque el texto de la información sobre herramientas tiene un relleno superior e inferior de 5 px. Si aumenta su relleno, también aumente el valor del top propiedad para asegurarse de que permanezca en el medio (si esto es algo que desea). Lo mismo se aplica si desea que la información sobre herramientas se coloque a la izquierda.

Información sobre herramientas derecha

.tooltip .tooltiptext {
superior: -5px;

izquierda: 105%;
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Información sobre herramientas izquierda

.tooltip .tooltiptext {
superior: -5px;

derecha: 105%;
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Si desea que la información sobre herramientas aparezca en la parte superior o inferior, consulte los ejemplos a continuación. Tenga en cuenta que usamos el margin-left propiedad con un valor de menos 60 píxeles. Esto es para centrar la información sobre herramientas encima / debajo del texto flotante. Se establece en la mitad del ancho de la información sobre herramientas (120/2 = 60).

Información sobre herramientas superior

.tooltip .tooltiptext {
ancho: 120px;

abajo: 100%;
izquierda: 50%;
margen izquierdo: -60px; / * Use la mitad del ancho (120/2 = 60), para centrar la información sobre herramientas * /
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Información sobre herramientas inferior

.tooltip .tooltiptext {
ancho: 120px;
Top 100%;
izquierda: 50%;
margen izquierdo: -60px; / * Use la mitad del ancho (120/2 = 60), para centrar la información sobre herramientas * /
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »


Flechas de información sobre herramientas

Para crear una flecha que debería aparecer desde un lado específico de la información sobre herramientas, agregue contenido «vacío» después de la información sobre herramientas, con la clase de pseudoelemento ::after junto con la content
propiedad. La flecha en sí se crea usando bordes. Esto hará que la información sobre herramientas se vea como un bocadillo.

Este ejemplo demuestra cómo agregar una flecha en la parte inferior de la información sobre herramientas:

Flecha inferior

.tooltip .tooltiptext :: after {
contenido: » «;
posición: absoluta;
Top 100%; / * En la parte inferior de la información sobre herramientas * /
izquierda: 50%;
margen izquierdo: -5px;

ancho del borde: 5px;
estilo de borde: sólido;

color del borde: negro transparente transparente transparente;
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Ejemplo explicado

Coloque la flecha dentro de la información sobre herramientas: top: 100% colocará la flecha en la parte inferior de la información sobre herramientas. left: 50% centrará la flecha.

Nota: los border-width propiedad especifica el tamaño de la flecha. Si cambia esto, cambie también el margin-left valor al mismo. Esto mantendrá la flecha centrada.

los border-color se utiliza para transformar el contenido en una flecha. Establecemos el borde superior en negro y el resto en transparente. Si todos los lados fueran negros, terminaría con un cuadro cuadrado negro.

Este ejemplo demuestra cómo agregar una flecha en la parte superior de la información sobre herramientas. Observe que esta vez establecemos el color del borde inferior:

Flecha superior

.tooltip .tooltiptext :: after {
contenido: » «;
posición: absoluta;
abajo: 100%; / * En la parte superior de la información sobre herramientas * /
izquierda: 50%;
margen izquierdo: -5px;

ancho del borde: 5px;
estilo de borde: sólido;

color del borde: transparente transparente negro transparente;
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Este ejemplo demuestra cómo agregar una flecha a la izquierda de la información sobre herramientas:

Flecha izquierda

.tooltip .tooltiptext :: after {
contenido: » «;
posición: absoluta;
arriba: 50%;
derecha: 100%; / * A la izquierda de la información sobre herramientas * /
margen superior: -5px;

ancho del borde: 5px;
estilo de borde: sólido;

color del borde: transparente negro transparente transparente;
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »

Este ejemplo demuestra cómo agregar una flecha a la derecha de la información sobre herramientas:

Flecha correcta

.tooltip .tooltiptext :: after {
contenido: » «;
posición: absoluta;
arriba: 50%;
izquierda: 100%; / * A la derecha de la información sobre herramientas * /
margen superior: -5px;

ancho del borde: 5px;
estilo de borde: sólido;

color del borde: transparente transparente transparente negro;
}

Resultado:

Pasa el cursor sobre mi
Texto de información sobre herramientas

Inténtalo tú mismo »


Desvanecer en la información sobre herramientas (animación)

Si desea desvanecerse en el texto de la información sobre herramientas cuando esté a punto de ser visible, puede usar el CSS transition propiedad junto con el opacity
propiedad, y pasar de ser completamente invisible a 100% visible, en una cantidad de segundos especificados (1 segundo en nuestro ejemplo):

Ejemplo

.tooltip .tooltiptext {
opacidad: 0;

transición: opacidad 1s;
}

.tooltip: hover .tooltiptext {
opacidad: 1;
}

Inténtalo tú mismo »

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Página de inicio de oracleIdentity Governance

JPA frente a Hibernate – javatpoint