Información sobre herramientas de 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
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Ejemplo explicado
HTML: utilice un elemento contenedor (como <div>) y agréguele la
"tooltip"clase. Cuando el usuario pase el mouse sobre este <div>, se mostrará el texto de información sobre herramientas.
El texto de información sobre herramientas se coloca dentro de un elemento en línea (como <span>) con class="tooltiptext".
CSS: La tooltipclase use position:relative, que es necesaria para posicionar el texto de información sobre herramientas ( position:absolute).
Nota: Vea los ejemplos a continuación sobre cómo colocar la información sobre herramientas.
La tooltiptextclase contiene el texto de información sobre herramientas real. Está oculto de forma predeterminada y será visible al pasar el mouse por encima (ver más abajo). También le hemos agregado algunos estilos básicos: 120 px de ancho, color de fondo negro, color de texto blanco, texto centrado y relleno superior e inferior de 5 px.
La propiedad CSS border-radiusse utiliza para agregar esquinas redondeadas al texto de información sobre herramientas.
El :hoverselector se usa para mostrar el texto de información sobre herramientas cuando el usuario mueve el mouse sobre el <div> 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 "sobre el que se puede desplazar" (<div>). También tenga en cuenta que top:-5pxse usa para colocarlo en el medio de su elemento contenedor. Usamos el número 5 porque el texto de información sobre herramientas tiene un relleno superior e inferior de 5px. Si aumenta su relleno, también aumente el valor de la toppropiedad para asegurarse de que permanezca en el medio (si 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 {
top: -5px;
left:
105%;
}
Resultado:
Información sobre herramientas izquierda
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Resultado:
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 la margin-leftpropiedad con un valor de menos 60 píxeles. Esto es para centrar la información sobre herramientas arriba/abajo del texto que se puede desplazar. Se establece en la mitad del ancho de la información sobre herramientas (120/2 = 60).
Información sobre herramientas superior
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultado:
Información sobre herramientas inferior
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultado:
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 ::afterjunto con la content
propiedad. La flecha en sí se crea usando bordes. Esto hará que la información sobre herramientas se vea como una burbuja de diálogo.
Este ejemplo demuestra cómo agregar una flecha en la parte inferior de la información sobre herramientas:
Flecha inferior
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Resultado:
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: La border-widthpropiedad especifica el tamaño de la flecha. Si cambia esto, también cambie el margin-leftvalor al mismo. Esto mantendrá la flecha centrada.
El border-colorse 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ías con una caja cuadrada negra.
Este ejemplo muestra cómo agregar una flecha en la parte superior de la información sobre herramientas. Tenga en cuenta que esta vez establecemos el color del borde inferior:
Flecha superior
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Resultado:
Este ejemplo demuestra cómo agregar una flecha a la izquierda de la información sobre herramientas:
Flecha izquierda
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Resultado:
Este ejemplo demuestra cómo agregar una flecha a la derecha de la información sobre herramientas:
Flecha correcta
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Resultado:
Fundido de información sobre herramientas (animación)
Si desea desvanecer el texto de información sobre herramientas cuando esté a punto de ser visible, puede usar la transitionpropiedad CSS junto con la opacity
propiedad y pasar de ser completamente invisible a 100% visible, en una cantidad de segundos específica (1 segundo en nuestro ejemplo):
Ejemplo
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}