Crear mensajes de ayuda con CSS

Al crear una aplicación web, a menudo es necesario presentar las personas con indicaciones amable ayuda que explican las partes de su interfaz. Una de las maneras de hacerlo es tener páginas separadas con los temas de ayuda que los que enlace. Sin embargo, esto hace que la gente pierda el contexto de lo que están haciendo y no es muy fácil de usar.

Una mejor manera es para mostrar la derecha texto de ayuda donde más se necesita. Aquí está cómo hacerlo sólo con unas pocas reglas CSS y un poco 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 descripción negro, y el .help-tipdiv es el círculo azul con un signo de interrogación.

El párrafo se oculta de forma predeterminada y sólo se revela en vuelo estacionario. Puede contener enlaces, imágenes y otros tipos de HTML. Se revela con una animación suave CSS, como se puede ver en la demo.

el CSS

Todo esto es posible con la ayuda de un poco de CSS (se puede encontrar en style.css en el zip descargable, enlazado desde los botones en el 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 todavía necesita el prefijo -webkit para las animaciones de fotogramas clave, por lo que el suministro ambas versiones.

Esta animación escala el elemento de la esquina superior derecha (gracias a la transformación origen en la línea 23) y anima la opacidad.

Se activa en vuelo estacionario, por lo que mientras usted tiene el puntero del ratón sobre la descripción, que permanecerá en la pantalla.

Es importante tener en cuenta que el elemento contenedor que el círculo azul con el signo de interrogación se muestra en, debe establecerse en position: relative , a fin de que el círculo que aparece en la esquina superior derecha.

Espero que haya encontrado este consejo útil y que se encuentra un uso para él en sus aplicaciones web!

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros