Dicas de ferramenta CSS
- Página anterior Animações CSS
- Próxima página Estilo de imagem CSS
Crie uma dica (Tooltip) usando CSS.
Demonstração: Dica
Exemplo
Quando o usuário move o ponteiro do mouse sobre um elemento, a dica geralmente é usada para fornecer informações adicionais sobre algum conteúdo:
Dica Básica
Crie uma dica que apareça ao passar o mouse sobre um elemento:
Exemplo
<style>
/* Contêiner da Dica */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Exibe uma linha pontilhada abaixo do texto suspenso, se necessário */
}
/* Texto da Dica */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Posiciona o texto da dica - veja os exemplos abaixo */
position: absolute;
z-index: 1;
}
/* Exibe o texto da dica ao passar o mouse sobre o contêiner de dica */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Passe o mouse sobre mim
<span class="tooltiptext">Texto da Dica</span>
</div>
Exemplo de explicação
HTML:
Usando o elemento contenedor (por exemplo, <div>) e adicionando "tooltip" Classe. Quando o usuário passar o mouse sobre este <div>, o texto da dica de ferramenta será exibido.
O texto da dica de ferramenta está na class="tooltiptext" elementos embutidos (como <span>).
CSS:
tooltip Classe usada position:relative，usado para posicionar o texto da dica de ferramenta (position:absolute）。Notar: sobre como posicionar a dica de ferramenta, veja os exemplos abaixo.
tooltiptext Classe armazena o texto real da dica de ferramenta. Por padrão, ele está oculto e torna-se visível ao passar o mouse sobre ele (veja a seguir). Também adicionamos alguns estilos básicos: largura de 120 pixels, fundo preto, texto branco, alinhamento de texto no meio e margem interna superior e inferior de 5px (padding).
CSS border-radius Propriedade usada para adicionar arredondamento às bordas da dica de ferramenta.
Quando o usuário move o mouse para cima do <div> com class="tooltip",:hover Seletor usado para exibir o texto da dica de ferramenta.
Alinhamento da dica de ferramenta
Neste exemplo, a dica de ferramenta está no lado direito do texto "hover" (<div>),left:105%）。Além disso, note quetop:-5px Usado para colocá-lo no meio do elemento contenedor. Usamos o número 5 porque a margem interna superior e inferior da dica de ferramenta são de 5px. Se você aumentar a margem interna, também por favor aumente top O valor da propriedade, para garantir que ela fique no meio. Se você quiser colocar a dica de ferramenta à esquerda, também se aplica.
Dica de ferramenta à direita
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Resultado:
Dica de ferramenta à esquerda
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Resultado:
Se você deseja que a dica de ferramenta esteja na parte superior ou inferior, veja os exemplos abaixo. Observe que usamos a propriedade de margem esquerda negativa de 60 pixels (margin-left). Isso é para alinhar a dica de ferramenta com o texto suspenso. Este valor é metade da largura da dica de ferramenta (120/2 = 60).
Dica de ferramenta superior
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use metade da largura (120/2 = 60), para centralizar a dica de ferramenta */
}
Resultado:
Dica de ferramenta inferior
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use metade da largura (120/2 = 60), para centralizar a dica de ferramenta */
}
Resultado:
Seta da dica de ferramenta
Para criar uma seta que apareça no lado especificado da dica de ferramenta, adicione o conteúdo "vazio" após a dica de ferramenta e use a classe de pseudo-elemento ::after e content propriedade. A seta em si é criada usando a borda. Isso fará com que o tooltip pareça como uma bolha.
Este exemplo demonstra como adicionar uma seta no fundo do tooltip:
Seta no fundo
.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 de explicação
posiciona a seta dentro do tooltip:top: 100% coloca a seta na parte inferior do tooltip.left: 50% fará com que a seta fique centralizada.
Aviso:border-width a propriedade especifica o tamanho da seta. Se você alterar essa configuração, também altere margin-left mudar para o mesmo valor. Isso fará com que a seta fique centralizada.
border-color usado para transformar o conteúdo em uma seta. Configuramos a borda superior para preto e as outras para transparente. Se todas as faces forem pretas, o resultado final será uma caixa quadrada preta.
Este exemplo demonstra como adicionar uma seta no topo do tooltip. Observe que, desta vez, configuramos a cor da borda inferior:
Seta no topo
.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 à esquerda do tooltip:
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 do tooltip:
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:
Dica de ferramenta de entrada (animação)
Se você quiser que o texto da dica de ferramenta apareça e desapareça gradualmente, você pode usar CSS transition Atributo com opacity Atributos usados juntos e se tornam visíveis em um número especificado de segundos (no exemplo é 1 segundo):
Exemplo
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Página anterior Animações CSS
- Próxima página Estilo de imagem CSS
