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
Crea una información sobre herramientas que aparece cuando el usuario mueve el mouse sobre un elemento.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<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;
/* POSICION DEL TOOLTIP */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body style="text-align: center">
<h2>Tooltip básico</h2>
<div class="tooltip">
Situate sobre mí
<span class="tooltiptext">Tooltip text</span>
</div>
<p>
Ten en cuenta que la posición del texto de información sobre herramientas
no es muy buena. Vuelve al tutorial y continúa leyendo sobre cómo colocar
el Tooltip de una manera deseable.
</p>
</body>
</html>
Ejm explicado:
- HTML: usamos un contenedor, como un elemento <div> y la clase tooltip. Cuando un usuario se mueve sobre el div, mostrará el texto del tooltip. El texto será colocado dentro de un elemento en línea, como un <span> con la clase tooltiptext.
- CSS: La clase tooltip usa position: relative, que es necesaria para colocar el texto de información sobre herramientas (position: absolute).
- La clase tooltiptext contiene el texto del tooltip. Está oculto de forma predeterminada y será visible al pasar el mouse por encima. 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 border-radius es usada para redondear las esquinas al texto del tooltip
- El selector :hover es usado para mostrar el texto del tooltip cuando el usuario mueve el ratón sobre el elemento <div> con class: tooltip;
Posicionando tooltips
En este ejemplo, el se coloca a la derecha (izquierda: 105 %) del texto «sobre el que se puede desplazar» (<div>). También ten 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 un relleno superior e inferior de 5px. Si aumentas su relleno, también aumente el valor de la propiedad superior para asegurarse de que permanezca en el medio (si es algo que deseas). Lo mismo se aplica si deseas que la información sobre herramientas se coloque a la izquierda.
Ejm de tooltip a la derecha
<!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>
Ejm de tooltip a la izquierda
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}Si deseas que la información sobre el tooltip aparezca en la parte superior o inferior, consulta los ejemplos a continuación. Ten en cuenta que usamos la propiedad margin-left con un valor de menos 60 píxeles. Esto es para centrar el tooltip arriba/abajo del texto que se puede desplazar. Se establece en la mitad del ancho del tooltip (120/2 = 60).
Ejemplo de tooltip top (arriba)
<!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>
Ejemplo de tooltip bottom (abajo)
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}Flechas tooltip
Flecha abajo
Para crear una flecha que debería aparecer desde un lado específico de la información sobre tooltip, agrega content «empty» después del tooltip, con la clase de pseudoelemento ::after junto con la propiedad content. La flecha en sí se crea usando bordes. Esto hará que la información sobre herramientas se vea como una burbuja de diálogo.
<!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>
Ejemplo explicado
Coloca la flecha dentro del tooltip: arriba: 100% colocará la flecha en la parte inferior del tooltip. izquierda: 50% centrará la flecha.
Nota: La propiedad border-width especifica el tamaño de la flecha. Si cambias esto, también cambia el valor del margen izquierdo al mismo. Esto mantendrá la flecha centrada.
border-color se usa 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.
Flecha arriba
.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;
}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;
}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;
}Fade in tooltips
Si deseas que el tooltip se desvanezca cuando esté a punto de ser visible, puedes usar la propiedad transition 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).
Ejm
<!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>