Como fazer - dica de ferramenta
Aprenda a criar dicas de ferramentas com CSS.
Passe o mouse sobre o texto abaixo:
Principal
Texto da dica de ferramenta
Direito
Texto da dica de ferramenta
Fundo
Texto da dica de ferramenta
Deixou
Texto da dica de ferramenta
Como criar dicas de ferramentas
Etapa 1) Adicionar HTML:
Exemplo
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Etapa 2) Adicionar CSS:
Exemplo
/* Tooltip container */
.tooltip {
position:
relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable
text */
}
/* Tooltip text */
.tooltip .tooltiptext
{
visibility: hidden;
width:
120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left:
50%;
margin-left: -60px;
/*
Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after
{
content: "";
position:
absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent
transparent transparent;
}
/* Show the tooltip text when
you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Dica: Acesse nosso Tutorial de dicas de ferramentas CSS para saber mais sobre dicas de ferramentas.
Dica: Para criar dicas de ferramentas "clicáveis", acesse nosso Tutorial Como criar pop -ups
Dica: Os modais também são semelhantes às dicas de ferramentas. Acesse nosso tutorial Como criar modais para aprender sobre modais.