Como Crear Tips de Ayuda con CSS

Muchas veces una pagina web necesita mostrar un poco de información de ayuda a los lectores, es por eso que hoy te presento este tutorial sobre como crear tips de ayuda haciendo uso de css y por supuesto html. Estos tips de ayuda son importantes porque limpian un poco la estética de la web al no tener toda la información amontonada en un solo lugar, en cambio, si el usuario considera oportuno deja de ser oculta para ser mostrada elegantemente, esto es lo que haremos el día de hoy. Te mostraremos el resultado final de estos tips de ayuda con css así como el código detrás, ¿Estas listo? vamos ya :sunglasses:

Lo que haremos

El codigo y ejemplo

Vamos a realizar este ejemplo de tips de ayuda con css que viste en el video anterior , para lo cual necesitamos lo siguiente.

Un archivo html (index.html)
Un archivo de estilo css (style.css)
Una imagen cualquiera para mostrarla dentro un tip de ayuda

Lo primero sera editar el archivo html, primero asegurate de enlazar con el archivo css.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Ahora crearemos dos divs anidados, uno para el cuadro de texto y otro para el icono de tip de ayuda, dentro de este ultimo ira el texto que queremos ocultar en primera instancia del usuario.

<div class="cuadro">
   <div class="tip-ayuda">
      <p>Esto es un tip de ayuda en texto plano!</p>
   </div>
   <p>Esto es un tip de ayuda sobre cualquier objeto de tu pagina web para ay    udar a tus visitantes a resolver sus dudas, puede contener texto plano, c    odigo html o imagenes.</p>
</div>

Ten en cuenta que el primer div para el texto regular pertenece a una clase llamada cuadro y el segundo div pertenece a una clase llamada tip-ayuda.

Pasemos ahora al código css, el codigo de la clase cuadro es el siguiente.

.cuadro{
   display:block;
   position:relative;
   padding:40px;
   background-color:#CCFFFF;
   color:#4b8ae1;
   font-weight:bold;
   width:600px;
   left:50%;
   margin-left:-300px;
}

simplemente es código de estilo y centrado del objeto nada del otro mundo, el código relacionado al div que funciona como tip de ayuda es el siguiente.

.tip-ayuda{
   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;
   z-index:10000;
}

.tip-ayuda:before{
   content:'?';
   font-weight: bold;
   color:#fff;
}

.tip-ayuda:hover p{
   display:block;
   transform-origin: 100% 0%;

   -webkit-animation: fadeIn 0.3s ease-in-out;
   animation: fadeIn 0.3s ease-in-out;

}

.tip-ayuda p{
   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;
}

.tip-ayuda p:before{
   position: absolute;
   content: '';
   width:0;
   height: 0;
   border:6px solid transparent;
   border-bottom-color:#1E2021;
   right:10px;
   top:-12px;
}

.tip-ayuda p:after{ 
   width:100%;
   height:40px;
   content:'';
   position: absolute;
   top:-40px;
   left:0;
}

Como vez estos tips de ayuda con css hacen uso de una animacion llamada FadeIn, la cual se crea de la siguiente manera.

@-webkit-keyframes fadeIn {
   0% { 
      opacity:0; 
       transform: scale(0.6);
   }

   100% {
      opacity:100%;
      transform: scale(1);
   }
}

@keyframes fadeIn {
   0% { opacity:0; }
   100% { opacity:100%; }
}

esto da un poco de elegancia al tip de ayuda.

Ahora simplemente agrega los cuadros que quieras en tu archivo html, puedes incluir código html, enlaces, imágenes, videos y lo que quieras incluir.

Puedes ver el ejemplo en funcionamiento en el Lab del blog – Laboratorio Como crear tips de ayuda con css – o descargar el proyecto completo.

Descargar Proyecto Completo

Eso fue todo, un mini tutorial fácil, rápido y bastante vistoso :sunglasses: No olvides que si tienes una duda puedes dejarnos un comentario o contactarme a traves de g+.

Saludos!