Herramientas de sugerencia CSS
- Página anterior Animaciones CSS
- Página siguiente Estilos de imágenes CSS
Crea un tooltip (Tooltip) mediante CSS.
Demostración: Tooltip
Ejemplo
Cuando el usuario coloca el puntero del ratón sobre un elemento, el tooltip generalmente se utiliza para proporcionar información adicional sobre algún contenido:
Tooltip básico
Crea una herramienta de tooltip que se muestra cuando el ratón se coloca sobre un elemento:
Ejemplo
<style>
/* Contenedor del tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Si se necesita mostrar una línea punteada debajo del texto seleccionable */
}
/* Texto del tooltip */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Ubicación del texto del tooltip - consulte los ejemplos a continuación */
position: absolute;
z-index: 1;
}
/* Muestra el texto del tooltip cuando el ratón se mantiene sobre el contenedor del tooltip */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Pasa el ratón sobre mí
<span class="tooltiptext">Texto de tooltip</span>
</div>
Example Explanation
HTML：
Usando el elemento contenedor (por ejemplo, '<div>') y añadiendo "tooltip" clase. Cuando el usuario pasa el mouse sobre este '<div>', se muestra el texto de la herramienta de sugerencias.
El texto de la herramienta de sugerencias se encuentra en class="tooltiptext" elementos integrados (como <span>)
CSS：
tooltip La clase utiliza position:relative，usado para放置工具提示文本（position:absolute）。Nota: Para saber cómo放置工具提示，ver el ejemplo a continuación。
tooltiptext La clase guarda el texto real de la herramienta de sugerencias. Por defecto, está oculta y se vuelve visible al pasar el mouse por encima (ver a continuación). También hemos añadido algunos estilos básicos: un ancho de 120 píxeles, fondo negro, texto blanco, texto centrado y un margen interior superior e inferior de 5px (padding).
CSS border-radius Propiedad utilizada para agregar bordes redondeados al texto de la herramienta de sugerencias.
Cuando el usuario coloca el mouse sobre el '<div>' con la clase 'tooltip',:hover Selector utilizado para mostrar el texto de la herramienta de sugerencias.
Posicionar la herramienta de sugerencias
En este ejemplo, la herramienta de sugerencias se encuentra a la derecha del texto flotante ('<div>')left:105%）。Además, tenga en cuenta quetop:-5px Se utiliza para colocarla en el centro del elemento contenedor. Usamos el número 5 porque los márgenes superior e inferior del texto de la herramienta de sugerencias son de 5px. Si aumenta su margen interior, también le recomendamos que aumente top El valor de la propiedad, para asegurar que se mantenga en el centro. Si también es aplicable para colocar la herramienta de sugerencias en la izquierda.
Herramienta de sugerencias derecha
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Resultado:
Herramienta de sugerencias izquierda
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Resultado:
Si desea que la herramienta de sugerencias se ubique en la parte superior o inferior, consulte los ejemplos a continuación. Tenga en cuenta que hemos utilizado una margen izquierdo negativo de 60 píxeles (margin-left). Esto es para alinear la herramienta de sugerencias con el texto flotante en el centro. Este valor es la mitad del ancho de la herramienta de sugerencias (120/2 = 60).
Herramienta de sugerencias superior
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Utilice la mitad del ancho (120/2 = 60) para centrar la herramienta de sugerencias */
}
Resultado:
Herramienta de sugerencias inferior
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Utilice la mitad del ancho (120/2 = 60) para centrar la herramienta de sugerencias */
}
Resultado:
Flecha de la herramienta de sugerencias
Para crear una flecha que se muestre en el lado especificado de la herramienta de sugerencias, agregue un contenido 'vacío' después de la herramienta de sugerencias y utilice la clase de pseudoelemento ::after and content properties. The arrow itself is created using the border, making the tooltip look like a bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
arrow to the bottom
.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:
Example Explanation
Position the arrow inside the tooltip:top: 100% Place the arrow at the bottom of the tooltip.left: 50% This will center the arrow.
Note:border-width The attribute specifies the size of the arrow. If you change this setting, also change margin-left Change the value to the same value. This will center the arrow.
border-color used to convert content into an arrow. We set the top border to black and the rest to transparent. If all sides are black, the final result will be a black square box.
This example shows how to add an arrow to the top of the tooltip. Note that this time we set the bottom border color:
arrow to the top
.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:
This example demonstrates how to add an arrow to the left of the tooltip:
arrow to the left
.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:
This example demonstrates how to add an arrow to the right of the tooltip:
arrow to the right
.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:
Tooltip de entrada (animación)
Si desea que la texto de sugerencia que se mostrará pronto se desvanezca, puede usar CSS transition propiedad con opacity Al usar la propiedad de atributo junto con y cambiará en el número de segundos especificados (en el ejemplo es 1 segundo) de invisible completamente a visible al 100%:
Ejemplo
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Página anterior Animaciones CSS
- Página siguiente Estilos de imágenes CSS
