Criar dicas de ferramentas com CSS.
Exemplos Dica: Demo
Uma dica de ferramenta é muitas vezes usado para especificar informação extra sobre algo quando o usuário move o ponteiro do mouse sobre um elemento:
Dica básica
Criar uma dica de ferramenta que aparece quando o usuário move o mouse sobre um elemento:
Exemplo
<style>
/* 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: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Hover
over me
<span class="tooltiptext"> Tooltip
text </span>
</div> Tente você mesmo " exemplo Explicado
HTML) Use um elemento de recipiente (como <div> ) e adicione a "tooltip" classe para ele. Quando o mouse do usuário sobre este <div> , ele irá mostrar o texto dica de ferramenta.
O texto dica é colocado dentro de um elemento inline (como <span> ) com class="tooltiptext" .
CSS) A tooltip classe de uso position:relative , que é necessário para posicionar o texto dica de ferramenta ( position:absolute .) Nota: Veja os exemplos abaixo sobre como posicionar a dica de ferramenta.
O tooltiptext classe contém o texto dica real. Ele está escondido por padrão e será visível em foco (veja abaixo). Nós também adicionamos alguns estilos básicos para isso: largura 120px, cor de fundo preto, cor do texto branco, texto centrado, e superior 5px e preenchimento de fundo.
O CSS3 border-radius propriedade é usada para adicionar cantos arredondados para o texto dica de ferramenta.
A :hover seletor é usado para mostrar o texto dica de ferramenta quando o usuário move o mouse sobre o <div> com class="tooltip" .
posicionamento Tooltips
Neste exemplo, a dica é colocada para a direita (left:105%) do "hoverable" texto (<div>) . Observe também que top:-5px é usado para colocá-lo no meio do seu elemento recipiente. Nós usamos o número 5 porque o texto dica de ferramenta tem uma cobertura superior e inferior da 5px. Se você aumentar o seu preenchimento, também aumentam o valor do top propriedade para garantir que ele permanece no meio (se isso é algo que você quer). O mesmo se aplica se você quiser a dica colocado à esquerda.
Dica direita
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Resultado:
Dica esquerda
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Resultado:
Se você quiser a dica de ferramenta para aparecer no topo ou no fundo, veja os exemplos abaixo. Note que usamos o margin-left propriedade com um valor de menos de 60 pixels. Isto é para centralizar a dica acima / abaixo o texto hoverable. Ele é definido para a metade da largura da dica de ferramenta (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultado:
Dica de fundo
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultado:
setas Tooltip
Para criar uma seta que deve aparecer de um lado específico da dica de ferramenta, adicionar conteúdo "vazio" depois dica, com a classe pseudo-elemento ::after juntamente com o content propriedade. A seta em si é criado usando fronteiras. Isso fará com que o olhar dica como um balão de fala.
Este exemplo demonstra como adicionar uma seta para a parte inferior da dica:
seta inferior
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Resultado:
exemplo Explicado
Posicione a seta dentro da dica: top: 100% vai colocar a seta na parte inferior da dica de ferramenta. left: 50% vai centrar a seta.
Nota: A border-width propriedade especifica o tamanho da seta. Se você mudar isso, também alterar a margin-left valor para o mesmo. Isto irá manter a seta centrado.
A border-color é utilizada para transformar o conteúdo em uma seta. Vamos definir o limite superior para o preto, eo resto para transparente. Se todos os lados eram negros, você iria acabar com uma caixa quadrada preta.
Este exemplo demonstra como adicionar uma seta para o topo da dica. Observe que definir a cor da borda inferior desta vez:
Top Seta
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Resultado:
Este exemplo demonstra como adicionar uma seta para a esquerda da dica:
Seta esquerda
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Resultado:
Este exemplo demonstra como adicionar uma seta à direita da a dica:
Seta direita
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Resultado:
Fade In Tooltips (Animação)
Se você quer a desvanecer-se no texto dica de ferramenta quando ele está prestes a ser visível, você pode usar o CSS3 transition propriedade juntamente com a opacity propriedade e ir de ser completamente invisível para 100% visível, em um número de segundos especificado (1 segundo no nosso exemplo):
Exemplo
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Tente você mesmo " Nota: Você vai aprender mais sobre transições e animações mais tarde em nosso tutorial.