Cómo HACER - Información sobre herramientas
Aprenda a crear información sobre herramientas con CSS.
Pase el cursor sobre el texto a continuación:
Cima
Texto de información sobre herramientas
Correcto
Texto de información sobre herramientas
Fondo
Texto de información sobre herramientas
Izquierda
Texto de información sobre herramientas
Cómo crear información sobre herramientas
Paso 1) Agregar HTML:
Ejemplo
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Paso 2) Agregar CSS:
Ejemplo
/* 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: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left:
50%;
margin-left: -60px;
/*
Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after
{
content: "";
position:
absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent
transparent transparent;
}
/* Show the tooltip text when
you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Sugerencia: Vaya a nuestro Tutorial de información sobre herramientas de CSS para obtener más información sobre la información sobre herramientas.
Sugerencia: para crear información sobre herramientas en las que se pueda hacer clic, vaya a nuestro tutorial Cómo crear ventanas emergentes
Sugerencia: Los modales también son similares a la información sobre herramientas. Vaya a nuestro tutorial Cómo crear modales para obtener información sobre los modales.