Início
Loja
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
CSS:
- Código:
/* Tooltips */
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
padding: 6px 12px;
color: #FFFFFF;
background: #000000;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 6px solid #000000;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -35px;
z-index: 999;
}
HTML:
- Código:
<a class="tooltips" href="#">CSS Tooltip<span>Tooltip</span></a>
Créditos: Cssportal & Je4n (Apenas fiz algumas edições de posicionamento)
