TolTip com Css

TolTip com Css

Tooltip é aquela moldura flutuante (pop up) que abre quando passa-se o mouse sobre um elemento da interface (normalmente uma palavra em um texto, link etc.) e que contém uma explicação adicional sobre tal elemento.

Vamos Adicionar o HTML:

<a href="#" title="Tooltip é aquela moldura flutuante quando passa-se o mouse" class="tooltip">
   <span title="Veja">Toltip</span>
</a>

Vamos Adicionar o CSS

.tooltip{ 
    display:inline; 
    position:relative; 
    text-decoration:none; 
    color:#353535; 
}
		
.tooltip:hover:after{
   background: #333;
   background: rgba(0,0,0,.8);
   border-radius: 5px;
   bottom: 26px;
   color: #fff;
   content: attr(title);
   left: 20%;
   padding: 5px 15px;
   position: absolute;
   z-index: 98;
   width: 220px!important;
}
		
.tooltip:hover:before{
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

.tooltip span { color:#353535; }

Baixar Código Veja Funcionando