Crea información sobre herramientas con CSS.
Una información sobre herramientas se utiliza a menudo para especificar información adicional sobre algo cuando el usuario mueve el puntero del mouse sobre un elemento:
Cree una información sobre herramientas que aparezca cuando el usuario mueva el mouse sobre un elemento:
<style>
/* Tooltip container */
.tooltip-local {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip-local .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-local:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip-local">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
HTML: Utilice un elemento contenedor (como <div>) y agregue el clase "tooltip". Cuando el usuario pasa 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 clase tooltip usa posición:relativa, que es necesario para posicionar el texto de información sobre herramientas (posición:absoluta). Nota: Consulte los ejemplos siguientes sobre cómo colocar la información sobre herramientas.
La clase tooltiptext contiene el texto de información sobre herramientas real. Es oculto de forma predeterminada y será visible al pasar el mouse (ver más abajo). También 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 píxeles.
La propiedad CSS border-radius se utiliza para agregar esquinas redondeadas a la información sobre herramientas. texto.
El selector :hover se utiliza para mostrar el texto de información sobre herramientas cuando el usuario mueve el Pase el mouse sobre <div> con class="tooltip".
En este ejemplo, la información sobre herramientas se coloca a la derecha (izquierda:105%) del "hoverable" texto (<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 de información sobre herramientas tiene una parte superior y acolchado inferior de 5 píxeles. Si aumenta su relleno, aumente también el valor de la propiedad top a asegúrese 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.
.tooltip-local .tooltiptext {
top: -5px;
left:
105%;
}Resultado :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
top: -5px;
right:
105%;
}Resultado :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Si desea que la información sobre herramientas aparezca en la parte superior o inferior, consulte los ejemplos. abajo. Tenga en cuenta que utilizamos la propiedad margin-left con un valor de menos 60 píxeles. Esto es para centrar la información sobre herramientas encima/debajo del texto que se puede desplazar. Esta organizado a la mitad del ancho de la información sobre herramientas (120/2=60).
.tooltip-local .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}Resultado :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}Resultado :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Para crear una flecha que debería aparecer desde un lado específico de la información sobre herramientas, agregue "vacío" contenido después información sobre herramientas, con la clase de pseudoelemento ::after junto con el contenido propiedad. La flecha en sí se crea usando bordes. Esto hará que la información sobre herramientas parece un globo de diálogo.
Este ejemplo demuestra cómo agregar una flecha en la parte inferior de la información sobre herramientas:
.tooltip-local .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 :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Coloque la flecha dentro de la información sobre herramientas: top: 100% colocará la flecha en el parte inferior de la información sobre herramientas. izquierda: 50% centrará la flecha.
Nota: La propiedad border-width especifica el tamaño del flecha. Si cambia esto, cambie también el valor margin-left al mismo. Este mantendrá la flecha centrada.
El color del borde se utiliza para transformar el contenido en una flecha. fijamos 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 configuramos el color del borde inferior:
.tooltip-local .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 :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Este ejemplo demuestra cómo agregar una flecha a la izquierda de la información sobre herramientas:
.tooltip-local .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 :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Este ejemplo demuestra cómo agregar una flecha a la derecha de la información sobre herramientas:
.tooltip-local .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 :
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip w/ Right Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Si desea atenuar el texto de información sobre herramientas cuando está a punto de ser visible, Puede utilizar la propiedad CSS transition junto con la opacidad propiedad, y pasar de ser completamente invisible a 100% visible, en un número de segundos especificado (1 segundo en nuestro ejemplo):
.tooltip-local .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip-local:hover
.tooltiptext {
opacity: 1;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>