Produto
PRODUTO
Tooltip
A tooltip oferece informações complementares de um elemento gráfico ou componente de página a partir da interação de mouse-over ou long-press.
Estilos
Default
Esquerda
Direita
Multiplas linhas
Direita
Baixo - Utilizar este estilo apenas em desktop.
Código
HTML 
Exibir código
Copiar código
Exibir código
<a href="#">
<img src="/img/visibility-on.svg">
<div class="tooltip top">
One-line tooltip example
</div>
</a>
SASS Exibir código
Copiar código
Exibir código
.tooltip{
display: none;
background-color: #1e2a54;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #ffffff;
padding: 8px 10px;
text-decoration: none;
border-radius: 4px;
position: absolute;
width: 140px;
box-sizing: border-box;
font-size: 0.6875em;
&.top{
bottom: 120%;
margin-left: -70px;
left: 46%;
&:before{
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
content: "";
background-color: #1f2b54;
left: 48%;
bottom: -2px;
border-radius: 2px;
}
}
&.left{
top: -10px;
right: 130%;
&:before{
width: 10px;
height: 10px;
position: absolute;
content: "";
background-color: #1f2b54;
right: -2px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%) rotate(45deg);
position: absolute;
top: 50%;
border-radius: 2px;
}
}
&.right{
top: -10px;
left: 130%;
&:before{
width: 10px;
height: 10px;
position: absolute;
content: "";
background-color: #1f2b54;
left: -2px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%) rotate(45deg);
position: absolute;
top: 50%;
border-radius: 2px;
}
}
&.bottom{
top: 120%;
margin-left: -70px;
left: 47%;
&:before{
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
content: "";
background-color: #1f2b54;
left: 48%;
top: -2px;
border-radius: 2px;
}
}
}
JS Exibir código
Copiar código
Exibir código
$('body').on('mouseover', '.tooltip-handle', function(){
$('.tooltip', this).show();
});
$('body').on('mouseout', '.tooltip-handle', function(){
$('.tooltip', this).hide();
});