leer tabla de contenido
Información sobre herramientas de CSS
En este artículo, le mostraremos cómo crear información sobre herramientas utilizando HTML y CSS.
Información sobre herramientas básica
Se muestra una información sobre herramientas cuando se mueve el mouse sobre el elemento especificado:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
margin-left: 10px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
análisis de instancia
HTML usa elementos contenedores <div>y agrega tooltipclases. <div>Muestra un mensaje de sugerencia cuando se pasa el mouse .
El texto de sugerencia se coloca en elementos en línea (p. ej . <span>) y se utiliza class="tooltiptext".
tooltipSe utiliza la clase CSS position:relative, y el texto del mensaje debe establecer el valor de posicionamiento position:absolute.
Nota: La siguiente instancia mostrará más efectos de posicionamiento.
La clase tooltiptext se utiliza para el texto de información sobre herramientas real.
El modal se oculta y se muestra cuando el mouse se mueve sobre el elemento. Se establecen algunos estilos como ancho, color de fondo, color de fuente, etc.
Las propiedades de CSS3 border-radiusse utilizan para agregar esquinas redondeadas a la información sobre herramientas.
:hoverEl selector se usa para mostrar una sugerencia cuando el mouse se mueve <div>sobre .
herramienta de posicionamiento
En el siguiente ejemplo, la información sobre herramientas se muestra a la derecha (izquierda: 105 %) del elemento especificado.
Nota: top:-5px es lo mismo que posicionarse en el medio del elemento contenedor. Use el número 5 porque el relleno superior e inferior del texto de la sugerencia es de 5 px.
Si cambia el valor de relleno, el valor superior también debe cambiarse en consecuencia, para garantizar que esté alineado en el centro.
El mismo principio se aplica cuando la información sobre herramientas se muestra a la izquierda.
Se muestra en el mensaje de la derecha (css básico, lo siguiente modificará el css según las necesidades específicas):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<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: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">鼠标移动到我这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
Mostrar en el mensaje de la izquierda:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Si desea que la información sobre herramientas se muestre en la parte superior e inferior. Necesitamos usar la propiedad margin-left y establecerla en -60px. La fuente de este cálculo numérico es usar la mitad del ancho para la alineación central, es decir: ancho/2 (120/2 = 60).
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
Se muestra en la parte inferior:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
agregar flecha
Podemos usar pseudoelementos ::aftery contentpropiedades de CSS para crear un pequeño logotipo de flecha para la información sobre herramientas. La flecha se compone de un borde, pero cuando se combinan, la información sobre herramientas parece un cuadro de mensaje de voz.
El siguiente ejemplo muestra cómo agregar una flecha inferior a una información sobre herramientas que se muestra en la parte superior.
Información sobre herramientas superior/flecha inferior:
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<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: 105%;
}
.tooltip .tooltiptext {
width: 120px;
top: -150%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.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;
}
</style>
</head>
<body>
<h1>顶部提示框/底部箭头</h1>
<div class="tooltip">鼠标移动到我这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
análisis de instancia
Coloque la flecha dentro de la información sobre herramientas:
top: 100% , la flecha aparecerá en la parte inferior de la información sobre herramientas. left: 50% Se utiliza para centrar las flechas de alineación.
Nota:
border-widthLa propiedad especifica el tamaño de la flecha.
Si lo modifica, modifique también el margin-leftvalor . De esta forma se puede centrar la flecha.
border-colorSe utiliza para convertir contenido en flechas. Configure el borde superior para que sea negro y los demás para que sean transparentes.
Si el otro está configurado para ser negro, se mostrará como un cuadrilátero negro.
El siguiente ejemplo muestra cómo agregar una flecha al encabezado de la información sobre herramientas, prestando atención a la configuración del color del borde.
Información sobre herramientas inferior/flecha superior:
.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;
}
Los siguientes dos casos son ejemplos de flechas a la izquierda y a la derecha.
Información sobre herramientas derecha/flecha izquierda:
.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;
}
Información sobre herramientas izquierda/flecha derecha:
.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;
}
desvanecerse en efecto
Podemos usar CSS3 transitionpropiedades y opacitypropiedades para lograr el efecto de aparición gradual de la información sobre herramientas:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<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;
/* 淡入 - 1秒内从 0% 到 100% 显示: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h1>顶部提示框/底部箭头</h1>
<div class="tooltip">鼠标移动到我这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>