Tooltip feito só com CSS

Hoje irei demonstrar como fazer aparecer uma tooltip aparecer como um complemento de explicação quando alguém coloca o mouse em cima de um form.

Pra fazer este efeito primeiro criamos o form utilizando um data atributo com o nome "data-tooltip" e colocamos a classe "tooltip" para servir como identificador.

           <form autocomplete="on" data-tooltip="Digite seus dados para acessar o sistema" class="tooltip">  
                <h3>Login</h3>  
                <input type="text" name="nome" placeholder="Nome"><br>  
                <input type="password" name="senha" placeholder="Senha"><br>  
                <button MostarTooltip>Cadastar</button>  
           </form>  

E depois implementamos a classe.

 .tooltip{  
   position: relative;  
 }  
 .tooltip:hover:after{  
      padding: 5px 15px;  
      border-radius: 5px;  
      background: #333;  
      background: rgba(0,0,0,.8);  
      position: absolute;       
      content: attr(data-tooltip); /* Aqui pego o texto que irá aparecer*/  
      top: -28%;  
      left: 27%;  
      z-index: 98;  
      color: #fff;  
 }  
 /* Aqui é feito o detalhe da setinha*/  
 .tooltip:hover:before{  
      border: solid;  
      border-color: #333 transparent;  
      border-width: 6px 6px 0px 6px;  
      content: "";  
      position: absolute;  
      top: -5%;  
      z-index: 99;  
 }  

Qualquer dúvida tem o exemplo completo la no GitHub

Fonte: http://frontendparaleigos.cc/como-fazer-um-tooltip-sem-javascript/

Da um + ai e compartilha ;)