As dicas de contexto, ou tooltips, são elementos visuais que aparecem quando o usuário passa o mouse sobre um item específico na página. Elas são úteis para fornecer informações adicionais sem sobrecarregar a interface do usuário. Neste post, vamos explorar dicas de contexto (Tooltip) em CSS, como criar tooltips simples e elegantes usando apenas HTML e CSS.
O que são Tooltips?
Tooltips são pequenas caixas de informação que aparecem quando um usuário interage com um elemento, como um botão, link ou ícone. Elas ajudam a explicar a função de um elemento ou fornecer informações contextuais adicionais sem ocupar muito espaço na tela.
Estrutura básica de um Tooltip
Para implementar um tooltip, você precisará de uma estrutura HTML simples. Aqui está um exemplo básico:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Tooltip</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Exemplo de Tooltip</h2>
<div class="tooltip-container">
<button class="tooltip">Passe o mouse aqui
<span class="tooltip-text">Esta é uma dica de contexto!</span>
</button>
</div>
</body>
</html>Estilizando o Tooltip com CSS
Agora, vamos adicionar estilo ao nosso tooltip usando CSS. O seguinte código CSS estiliza a dica de contexto e a faz aparecer ao passar o mouse sobre o botão:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}
.tooltip-container {
position: relative; /* Para posicionar o tooltip em relação ao botão */
display: inline-block; /* Permite que o elemento seja exibido como um bloco em linha */
}
.tooltip {
background-color: #007BFF; /* Cor de fundo do botão */
color: white; /* Cor do texto do botão */
border: none; /* Remove a borda padrão */
padding: 10px 15px; /* Espaçamento interno */
border-radius: 5px; /* Bordas arredondadas */
cursor: pointer; /* Muda o cursor para indicar interatividade */
}
.tooltip-text {
visibility: hidden; /* Inicialmente escondido */
width: 120px; /* Largura do tooltip */
background-color: #333; /* Cor de fundo do tooltip */
color: #fff; /* Cor do texto do tooltip */
text-align: center; /* Centraliza o texto */
border-radius: 5px; /* Bordas arredondadas */
padding: 5px; /* Espaçamento interno do tooltip */
position: absolute; /* Posiciona o tooltip em relação ao contêiner */
z-index: 1; /* Certifica que o tooltip está acima de outros elementos */
bottom: 125%; /* Coloca o tooltip acima do botão */
left: 50%; /* Centraliza o tooltip */
margin-left: -60px; /* Ajusta a posição para centralizar */
opacity: 0; /* Começa invisível */
transition: opacity 0.3s; /* Transição suave ao aparecer */
}
.tooltip-container:hover .tooltip-text {
visibility: visible; /* Torna visível ao passar o mouse */
opacity: 1; /* Aumenta a opacidade para 1 */
}Explicação do CSS
- Estilo do corpo: Definimos uma fonte e uma cor de fundo leve para a página;
- Contêiner do Tooltip: O contêiner (
.tooltip-container) usaposition: relativepara permitir que o tooltip seja posicionado em relação a ele; - Botão Tooltip: Estilizamos o botão com uma cor de fundo, texto branco, bordas arredondadas e um cursor de ponteiro;
- Texto do Tooltip:
- Inicialmente invisível (
visibility: hiddeneopacity: 0); - Posicionado acima do botão com
bottom: 125%e centralizado horizontalmente comleft: 50%emargin-left: -60px; - O tooltip fica visível (
visibility: visibleeopacity: 1) quando o mouse está sobre o contêiner.
- Inicialmente invisível (
- Transição: A propriedade
transitionpermite que a mudança de opacidade seja suave.
Resultado final
Quando você executar o código em um navegador, verá um botão que, ao passar o mouse, revela uma dica de contexto elegante acima dele. Você pode personalizar as cores, tamanhos e fontes para se adequar ao seu design.
Os tooltips são uma excelente maneira de fornecer informações adicionais sem sobrecarregar a interface do usuário.
Usando apenas HTML e CSS, você pode criar dicas de contexto atraentes e funcionais que melhoram a experiência do usuário em seu site. Experimente diferentes estilos e posicionamentos para descobrir o que funciona melhor para sua aplicação!
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Dúvidas ou sugestões sobre dicas de contexto (Tooltip) em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários