Tooltips CSS animados para usar en tu web

Los Tooltips CSS nos permiten mostrar una descripción emergente al deslizar el cursos sobre un elemento en nuestra web.

Tooltips CSS Animados

Cada vez un número mayor de desarrollores web apuestan por la utilización de Tooltips en sus páginas web.

Su implementación es bastante sencilla y resultan muy útiles a la hora de hacer pequeñas descripciones o alertas en una web.

El html

Para comenzar crearemos nuestro archivo html que contiene los elementos arriba, abajo, izquierda y derecha.

A cada elemento le asignaremos una clase para posteriormente manipularlos en CSS.

<h1>ToolTip CSS Animado </h1>
<!--    con = Contenedor de los elementos -->
    <div class="con">
      
      <!-- tooltip Izquierdo -->
      <div class="con-tooltip left">
        <p> Izquierda </p>
        <div class="tooltip ">
         <p>Izquierda</p>
        </div>
      </div>
    
      <!-- tooltip Superior -->
      <div class="con-tooltip top">
        <p> Arriba </p>
        <div class="tooltip ">
          <p>Arriba</p>
        </div>
      </div>
      
      <!-- tooltip Inferior -->
      <div class="con-tooltip bottom">
        <p> Abajo </p>
        <div class="tooltip ">
          <p>Abajo</p>
        </div>
      </div>

      <!-- tooltip Derecho-->

     <div class="con-tooltip right">
      <p> Derecha </p>
      <div class="tooltip ">
        <p>Derecha</p>
      </div>
     </div>
      
      <!--      Fin con = Contenedor -->
    </div>

    <h3> AJ Creativo </h3>

Elegantes Efectos Modales con CSS y JavaScript 2018

El CSS

En nuestra hoja de estilos nos encargaremos de realizar nuestros Tooltips CSS.

Podemos modificarles el color, la posición y la propia transición.

@import url('https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu');


/*End Fonts*/

/* Start Body */
body {
/*   background: #EEE; */   background: url("https://s16.postimg.org/4d17gd0vp/smbg.png");
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #444;
  font-family: 'Comfortaa', cursive;
  text-align: center;
  font: 16px;

}

/* End Body */
h1{
  margin-bottom: 7%;
}

/*tooltip Box*/.con-tooltip {

  position: relative;
  background: #F2D1C9;
  
  border-radius: 9px;
  padding: 0 20px;
  margin: 10px;
  
  display: inline-block;
  
  transition: all 0.3s ease-in-out;
  cursor: default;

}

/*tooltip */.tooltip {
  visibility: hidden;
  z-index: 1;
  opacity: .40;
  
  width: 100%;
  padding: 0px 20px;

  background: #333;
  color: #E086D3;
  
  position: absolute;
  top:-140%;
  left: -25%;
  

  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  
  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}


/* tooltip  after*/.tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #333 transparent transparent transparent;

  position: absolute;
  left: 40%;

}

.con-tooltip:hover .tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
    transition: .3s linear;
  animation: odsoky 1s ease-in-out infinite  alternate;

}
@keyframes odsoky {
  0%{
    transform: translateY(6px); 
  }

  100%{
    transform: translateY(1px); 
  }

}

/*hover ToolTip*/.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px);  }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }



/*left*/
.left .tooltip{ top:-20%; left:-170%; }

.left .tooltip::after{
  top:40%;
  left:90%;
  transform: rotate(-90deg);
}

/*bottom*/
.bottom .tooltip { top:115%; left:-20%; }

.bottom .tooltip::after{
  top:-17%;
  left:40%;
  transform: rotate(180deg);
}

/*right*/
.right .tooltip { top:-20%; left:115%; }

.right .tooltip::after{
  top:40%;
  left:-12%;
  transform: rotate(90deg);
}

h3 {
    background: #333;
    color: #E086D3;
    padding: 10px 20px;
    border-radius: 56px;
    width: 8em;
    margin: 20% auto 1% auto;
  
}

Generador de Tool Tips Gratis con CSS

Si lo tuyo no es la programación os voy a enseñar otro método con el cual podréis generar tool tips de forma fácil y gratis.

Se trata de una sencilla herramienta que podréis visitar en esta web y que te ayudará a diseñar y aprender a crear Tool Tips en CSS. Con el uso de este generador ahorrarás tiempo y esfuerzo y podrás mostrar información sobre cualquier enlace antes de que el usuario haga clic sobre él.

Colección de 28 Tool Tips en CSS gratuitos

Para finalizar y como regalo extra a este artículo os voy a dejar un enlace a una web donde podrás disfrutar de 28 diferentes diseños de Tool Tips en CSS animados y estáticos con sus respectivos códigos para que lo podáis implementar en vuestra página sin ningún tipo de problema.

Sin duda es una colección que cumplirá de sobra con lo que estáis buscando.

Conclusión

Como veis los tooltips CSS son una herramienta muy útil y fácil de agregar a nuestras páginas. Además al estar hechos en CSS, nos evitamos cargar cualquier librería javascript y mejoramos la carga y el rendimiento de nuestra web.

Espero que os haya sido de utilidad y podáis implementar fácilmente en vuestros proyectos. ¡Gracias!