Cree información sobre herramientas (
tooltips) con CSS.
Tooltip
Un tooltip se usa a menudo para especificar información adicional sobre algo cuando el usuario mueve el puntero del mouse sobre un elemento:
Tooltip básico
Cree un tooltip 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 - Use un elemento contenedor (como <div>) y agréguele la clase tooltip. Cuando el usuario pase el mouse sobre este <div>, se mostrará el texto el tooltip.
El tooltip se coloca dentro de un elemento en línea (como <span>) con class="tooltiptext".
CSS - La clase tooltip usa position:relative, que es necesaria para colocar el texto de información sobre herramientas (positionn:absolute). Nota: Vea los ejemplos a continuación sobre cómo colocar tooltips.
La clase tooltiptext 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: 120px de ancho, color de fondo negro, color de texto blanco, texto centrado y relleno superior e inferior de 5px.
La propiedad CSS border-radius se usa para agregar esquinas redondeadas al texto de información sobre herramientas.
El selector :hover se usa para mostrar el texto de información sobre herramientas cuando el usuario mueve el mouse sobre <div> con class="tooltip".
Posicionamiento Tooltips
En este ejemplo, el tooltip se coloca a la derecha (left:105%) del texto "sobre el que se puede desplazar" (<div>). También tenga en cuenta que top:-5px se usa para colocarlo en el medio de su elemento contenedor. Usamos el número 5 porque el texto tooltip tiene un relleno superior e inferior de 5px. Si aumenta su relleno, también aumente el valor de la propiedad top 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.
Tooltip a la derecha:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Tooltip a la izquierda:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Si desea que tooltip aparezca en la parte superior o inferior, consulte los ejemplos a continuación. Tenga en cuenta que usamos la propiedad margin-left con un valor de menos 60px. Esto es para centrar el tooltip arriba/abajo del texto que se puede desplazar. Se establece en la mitad del ancho de la información sobre herramientas (120/2 = 60).
Tooltip superior:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Tooltip inferior:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Flechas Tooltips
Para crear una flecha que debería aparecer desde un lado específico del tooltip, agregue contenido "vacío" después del tooltip, con la clase de p-seudoelemento ::after junto con la propiedad content. La flecha en sí se crea usando bordes. Esto hará que el tooltip 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:
Ejemplo:
.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;
}
Ejemplo explicado
Coloque la flecha dentro del tooltip: top:100% colocará la flecha en la parte inferior del tooltip left:50% centrará la flecha.
Nota: La propiedad border-width especifica el tamaño de la flecha. Si cambia esto, también cambie el valor del margen izquierdo al mismo. Esto mantendrá la flecha centrada.
El 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ías con una caja cuadrada negra.
Este ejemplo muestra cómo agregar una flecha en la parte superior del tooltip. 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;
}
Este ejemplo demuestra cómo agregar una flecha a la izquierda del tooltip:
Flecha a la 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;
}
Este ejemplo demuestra cómo agregar una flecha a la derecha del tooltip:
Flecha a la derecha:
.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;
}
Desvanecer Tooltips (Animaciones)
Si desea que el texto del tooltip se desvanezca cuando esté a punto de ser visible, puedes usar la propiedad de transición CSS junto con la propiedad opacity, y pasar de ser completamente invisible a 100% visible, en una cantidad de segundos específicos (1 segundo en nuestro ejemplo):
Ejemplo:
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
Traducido con 💚 desde W3Schools.com