Mais tooltips personalizados

Mais tooltips personalizados!
Hoje eu estou trazendo mais dois Tooltips personalizados para vocês. 
Vale lembrar que já temos alguns postados no site, basta CLICAR AQUI e conferir. 

O primeiro tooltip é esse abaixo, que contêm um pouco de opacidade e uma borda suave na parte debaixo, vejam o exemplo: 
Sweet Poison Sweet Poison Sweet Poison Sweet Poison Sweet Poison
Para fazer o primeiro modelo, copie o código abaixo e coloque no seu css:
a.tooltipsweet4 { position: relative; display: inline; } 
a.tooltipsweet4 span { position: absolute; width:140px; color: #FFFFFF; background: #a2c4c9; height: 30px; line-height: 30px; text-align: center; visibility: hidden; border-bottom: 2px solid #85b1b8;  border-radius: 0px; box-shadow: 0px 0px 2px #AB9E8C;} 
a.tooltipsweet4 span:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #a2c4c9; border-right: 8px solid transparent; } 
a:hover.tooltipsweet4 span { visibility: visible; opacity: 0.88; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; }
E coloque o código abaixo onde você quer que ele apareça:
<a class="tooltipsweet4" href="#"><span>ESCREVE O NOME AQUI</span><img src="LINK DA IMAGEM AQUI" /></a>

________________________________________________________________________

O segundo tooltip é esse abaixo, que contêm um pouco de opacidade e borda nas laterais, vejam o exemplo:

 
Sweet Poison Sweet Poison Sweet Poison Sweet Poison Sweet Poison
Para fazer o segundo modelo, copie o código abaixo e coloque no seu css:
a.tooltipsweet5 { position: relative; display: inline; } 
a.tooltipsweet5 span { position: absolute; width:100px; color: #FFFFFF; background: #ebc9b6; height: auto; line-height: 30px; text-align: center; visibility: hidden; border: 3px solid #e3bda8;  border-radius: 0px; box-shadow: 0px 0px 2px #AB9E8C;} 




a.tooltipsweet5 span:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; } 
a:hover.tooltipsweet5 span { visibility: visible; opacity: 0.88; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; }
E coloque o código abaixo onde você quer que ele apareça:
<a class="tooltipsweet5" href="#"><span>ESCREVE O NOME AQUI</span><img src="LINK DA IMAGEM AQUI" /></a>
Não copiem os códigos e nem disponibilizem em outros lugares.
Se usarem os tooltips, deem os devidos créditos ao nosso site!!!

Facebook Twitter Pinterest Google+ Email Addthis