Crear la información de herramientas con CSS.
Ejemplos Tooltip: demo
Una información sobre herramientas a menudo se utiliza para especificar información adicional acerca de algo cuando el usuario mueve el puntero del ratón sobre un elemento:
Información sobre la herramienta básica
Crear un texto de ayuda que aparece cuando el usuario mueve el puntero del ratón 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> Inténtalo tú mismo " ejemplo Explicación
HTML) Utilice un elemento de contenedor (como <div> ) y añada el "tooltip" de clase a la misma. Cuando el puntero del ratón sobre este usuario <div> , se mostrará el texto de sugerencia.
El texto de sugerencia se coloca dentro de un elemento en línea (como <span> ) con class="tooltiptext" .
CSS) La tooltip clase de uso position:relative , que es necesaria para colocar el texto de sugerencia ( position:absolute .) Nota: Vea los ejemplos a continuación sobre cómo colocar el texto de ayuda.
El tooltiptext clase contiene el texto de sugerencia real. Se oculta de forma predeterminada, y será visible en vuelo estacionario (véase más adelante). También hemos añadido algunos estilos básicos a lo ancho: 120px, color de fondo negro, color de texto blanco, texto centrado, y la parte superior de 5px y relleno inferior.
El CSS3 border-radius propiedad se utiliza para agregar esquinas redondeadas para el texto de sugerencia.
El :hover selector se utiliza para mostrar el texto de sugerencia cuando el usuario mueve el ratón sobre el <div> con class="tooltip" .
La información sobre herramientas de posicionamiento
En este ejemplo, la información de herramienta se coloca a la derecha (left:105%) de la "hoverable" de texto (<div>) . También tenga en cuenta que top:-5px se utiliza para colocarlo en el medio de su elemento contenedor. Utilizamos el número 5 porque el texto de sugerencia tiene un relleno superior e inferior de 5px. Si aumenta su relleno, también aumentará el valor de la top propiedad para asegurarse de que se mantiene en el medio (si esto es algo que usted quiere). Lo mismo se aplica si desea que la información de herramientas situada a la izquierda.
derecha Tooltip
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Resultado:
izquierda Tooltip
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Resultado:
Si desea que aparezca la información sobre herramientas en la parte superior o en la parte inferior, ver ejemplos a continuación. En cuenta que utilizamos el margin-left propiedad con un valor de menos de 60 píxeles. Esto es para centrar la descripción de arriba / abajo del texto hoverable. Está situado a la mitad del ancho de la información sobre herramientas (120/2 = 60).
Top Tooltip
.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 la herramienta 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:
Las flechas tooltip
Para crear una flecha que debe aparecer a partir de un lado específico de la información de herramientas, añadir contenido "vacío" después de la información de herramienta con la clase pseudo-elemento ::after junto con el content la propiedad. La flecha en sí se ha creado usando fronteras. Esto hará que la mirada sobre herramientas como un bocadillo.
Este ejemplo muestra cómo agregar una flecha en la parte inferior de la descripción:
Flecha abajo
.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 Explicación
Coloque la flecha dentro de la información de herramientas: top: 100% colocará la flecha en la parte inferior de la descripción. left: 50% se centrará en la flecha.
Nota: El border-width propiedad especifica el tamaño de la flecha. Si cambia esto, también cambiar el margin-left valor a la misma. Esto mantendrá la flecha centrada.
El border-color se utiliza para transformar el contenido en una flecha. Hemos establecido el borde superior de negro, y el resto a transparente. Si todos los lados eran de color negro, que terminaría con una caja cuadrada negro.
Este ejemplo muestra cómo agregar una flecha en la parte superior de la descripción. Nótese que establecemos el color del borde inferior de este tiempo:
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;
}
Resultado:
Este ejemplo muestra cómo agregar una flecha a la izquierda de la descripción:
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 muestra cómo agregar una flecha a la derecha de la descripción:
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:
Fade In información sobre herramientas (Animación)
Si desea hacer desaparecer en el texto de sugerencia cuando está a punto de ser visible, se puede utilizar el CSS3 transition propiedad junto con la opacity la propiedad, y pasar de ser completamente invisible para el 100% visible, en un número de segundos especificado (1 segundo en nuestro ejemplo):
Ejemplo
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Inténtalo tú mismo " Nota: Usted aprenderá más acerca de las transiciones y animaciones más adelante en el tutorial.