Aprender a crear información sobre herramientas con CSS.
Top texto Tooltip
Texto derecha Tooltip
Información sobre la herramienta de texto inferior
Información sobre la herramienta de texto izquierdo
Cómo crear información sobre herramientas
Paso 1) Añadir HTML:
Ejemplo
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip
text</span>
</div>Paso 2) Añadir 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 1s;
}
/* 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;
} Inténtalo tú mismo " Consejo: ir a nuestro Tutorial CSS Información sobre la herramienta para aprender más sobre la información de herramientas.