Tooltips
Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 23 de 35.
Dicas de ferramentas são pequenos elementos informativos que aparecem em uma janela pop-up quando o usuário passa o cursor sobre um elemento da interface ou foca nele. Elas fornecem contexto adicional sem poluir a interface principal.
Vamos criar uma dica de ferramenta básica usando HTML e CSS:
Primeiro, crie a estrutura HTML:
<div class="tooltip-container">
<button>Hover over me</button>
<span class="tooltip">This is a tooltip!</span>
</div>Em seguida, adicione o CSS para posicionar e mostrar/ocultar a dica de ferramenta:
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
visibility: hidden;
/* Posicione o tooltip */
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
/* Faça o tooltip aparecer e desaparecer suavemente */
opacity: 0;
transition: opacity 0.3s;
}
/* Mostre o tooltip ao passar o cursor sobre o contêiner */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}Com este código, quando você passar o cursor sobre o botão, uma dica de ferramenta aparecerá acima dele.
Desafio
FácilVocê recebeu um botão HTML com uma dica de ferramenta que aparece quando o usuário passa o cursor sobre o botão "Help". Sua tarefa:
- Oculte a dica de ferramenta por padrão.
- Adicione uma cor de fundo e uma cor de texto para destacá-la.
- Centralize o texto dentro da dica de ferramenta.
- Adicione um pouco de espaçamento interno para deixar a dica de ferramenta mais agradável.
- Arredonde os cantos com
border-radius.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<title>Tooltips</title>
<style>
.tooltip-container {
position: relative;
display: inline-block;
margin: 50px;
}
button {
padding: 8px 16px;
cursor: pointer;
}
.tooltip {
/* Animation properties */
opacity: 0;
transition: opacity 0.3s;
}
/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip-container">
<button>Help</button>
<span class="tooltip">Click for assistance</span>
</div>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Frontend Prático
Pratique por conta própria: Playground de Web