Al crear una aplicación web, a menudo necesita presentar a las personas mensajes de ayuda amigables que expliquen partes de su interfaz. Una de las formas de hacerlo es tener páginas separadas con temas de ayuda a los que se vincula. Sin embargo, esto hace que las personas pierdan el contexto de lo que están haciendo y no es muy fácil de usar.
Una mejor manera es mostrar el texto de ayuda justo donde se necesita. ¡Aquí se explica cómo hacerlo solo con unas pocas reglas de CSS y un poquito de HTML!
El HTML
El primer paso es escribir el marcado de la información sobre herramientas. Esto es lo que parece:
<div class="help-tip">
<p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>
El <p> elemento se muestra como la información sobre herramientas negra, y el .help-tip div es el círculo azul con un signo de interrogación.
El párrafo está oculto de forma predeterminada y solo se muestra al pasar el mouse sobre él. Puede contener enlaces, imágenes y otros tipos de HTML. Se revela con una animación CSS fluida, como puede ver en la demostración.
El CSS
Todo esto es posible con la ayuda de un poco de CSS (puedes encontrarlo en style.css en el zip descargable, enlazado desde los botones al principio del artículo):
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
@-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
} Chrome aún necesita el prefijo -webkit para las animaciones de fotogramas clave, por lo que proporcionamos ambas versiones. Esta animación escala el elemento desde la esquina superior derecha (gracias al origen de transformación en la línea 23) y anima la opacidad. Se activa al pasar el mouse, por lo que mientras tenga el mouse sobre la información sobre herramientas, permanecerá en la pantalla.
Es importante tener en cuenta que el elemento contenedor en el que se muestra el círculo azul con el signo de interrogación debe establecerse en posición:relativa , para que el círculo aparezca en la esquina superior derecha.
¡Espero que haya encontrado útil este consejo rápido y que le encuentre un uso en sus aplicaciones web!