Tooltips personalizados

Olá, hoje irei disponibilizar 3 modelos de tooltips personalizados. Se usarem os tooltips deem os créditos e não disponibilizem em outros lugares.

O primeiro modelo é esse abaixo, com bordas arredondadas e transparência, vejam:
Sweet Poison Sweet Poison Sweet Poison Sweet Poison
O segundo modelo é esse abaixo, com bordas arredondas e sem transparência, vejam:
Sweet Poison Sweet Poison Sweet Poison Sweet Poison
O terceiro modelo é esse abaixo, sem bordas arredondas e sem transparência, vejam:
Sweet Poison Sweet Poison Sweet Poison Sweet Poison
Para fazer o primeiro modelo, copie o código abaixo e coloque no seu css 
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #82766A;
border: 2px solid #82766A;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 15px;
box-shadow: 2px 2px 3px #82766A;
}
a.tooltips span:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 12px solid #82766A;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #82766A;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.6;
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="tooltips" href="#"><span>Bella Thorne</span><img src="http://i.imgur.com/OzZoVPn.png" /></a>

Para fazer o segundo modelo, copie o código abaixo e coloque-o em seu css:
a.tooltipsweet {
position: relative;
display: inline;
}
a.tooltipsweet span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #5B5046;
border: 2px solid #5B5046;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 15px;
box-shadow: 2px 2px 3px #82766A;
}
a.tooltipsweet span:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 12px solid #5B5046;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
a.tooltipsweet span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #5B5046;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltipsweet span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
E o código abaixo onde você quer que ele apareça:
<a class="tooltipsweet" href="#"><span>Bella Thorne</span><img src="http://i.imgur.com/OzZoVPn.png" /></a>

Para fazer o terceiro modelo, copie o código abaixo e cole em seu css:
a.tooltipsweet3 {
position: relative;
display: inline;
}
a.tooltipsweet3 span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #CBBCA6;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 0px;
box-shadow: 0px 0px 2px #AB9E8C;
}
a.tooltipsweet3 span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #CBBCA6;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltipsweet3 span {
visibility: visible;
opacity: 1;
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="tooltipsweet3" href="#"><span>Bella Thorne</span><img src="http://i.imgur.com/OzZoVPn.png" /></a>

As cores tão totalmente modificáveis.
Por: Pâmela Sampaio em 16/05/14
Não copiem os códigos e nem o tutorial.
Se for útil de alguma forma, deem os créditos!
Facebook Twitter Pinterest Google+ Email Addthis