Al crear una aplicación web, a menudo es necesario mostrarles a los usuarios, indicaciones amigables que ayuden a explicar ciertas secciones de tu interfaz. Una manera de hacerlo es contar con páginas separadas con temas de ayuda y enlazarlas. Sin embargo, esto hace que la gente pierda el contexto de lo que están haciendo y no es muy usable.
Otro método mucho mejor es mostrar un texto de ayudo justo donde más se necesite. En este artículo te mostramos cómo hacerlo con sólo unas pocas reglas de CSS y un poco de HTML. ¡Presta atención!
El HTML
El primer paso es implementar el markup del tooltip. Así es como se tendría que ver:
<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 elemento p se muestra como un tooltip de color negro, y el div .help-tip es el círculo azul con el símbolo de interrogación.
El párrafo se oculta por defecto y sólo se mostrará cuando se haga hover sobre el elemento. Puede contener enlaces, imágenes y otros elementos de HTML. Se muestra con una animación suave de CSS.
El CSS
Todo esto es posible con la ayuda de un poquito de CSS:
.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 todavía necesita el prefijo -webkit para las animaciones de fotogramas clave, por lo aplícalo para ambas versiones. Esta animación escala el elemento de la esquina superior derecha (gracias al transform-origin de la línea 23) y anima la opacidad. Se activa cuando se hace hover, por lo que mientras tengas el puntero del ratón sobre la descripción, este permanecerá en la pantalla.
Es importante tener en cuenta que mientras el elemento contenedor que tiene el círculo azul con el signo de interrogación se muestre, debe establecerse el position a relative, a fin de que el círculo aparezca en la esquina superior derecha.
Espero que hayas encontrado este consejo útil y que sepas aplicarlo en tus aplicaciones web