Neste tutorial, vamos explorar como criar tooltip só com HTML. Os tooltips são elementos informativos que aparecem quando o usuário passa o mouse sobre um determinado elemento na página. Aprenderemos a adicionar tooltips simples com o uso do atributo “title” em HTML, mas também veremos como estilizá-los e adicionar interatividade com CSS.
Conteúdo
Pré-requisitos para criar Tooltip só com HTML
Antes de começar, certifique-se de ter conhecimentos básicos de HTML. Para o passo seguinte na estilização é importante também entender o básico sobre CSS.
Para isso temos os seguintes tutoriais:
Passo 1: Estrutura básica de um Tooltip só com HTML
Vamos iniciar definindo a estrutura básica do nosso documento HTML.
Passo 2: Adicionando um tooltip só com HTML (atributo title)
Agora, vamos adicionar um tooltip simples utilizando apenas o atributo “title” em um elemento HTML. Ao passar o mouse sobre o elemento “span”, o texto definido no atributo “title” será exibido em um tooltip. Veja o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Tooltip simples só com HTML</title>
</head>
<body>
<span title="Este é um tooltip">Elemento com tooltip</span>
</body>
</body>
</html>
Tooltip simples com CSS
No entanto, esse método só com HTML não permite uma estilização muito robusta, para isso siga o como fazer tooltip simples com ajuda do CSS.
Se você quiser um tooltip complexo, também temos um tutorial para ajudar você! Como fazer tooltip com HTML e CSS.
Estrutura básica
Agora, vamos criar os elementos de tooltip no nosso HTML. Isso envolverá a criação de um elemento HTML para o qual queremos adicionar um tooltip. Podemos usar a tag <span> para envolver o elemento que terá o tooltip e adicionar a classe tooltip a esse elemento. Além disso, usaremos o atributo data-tooltip para especificar o conteúdo do tooltip.
Em seguida, vamos incorporar o CSS em nosso documento HTML. Podemos fazer isso usando a tag <style>. Dentro dessa tag, definiremos as regras de estilo para os nossos tooltips.
Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Tooltip simples com HTML e CSS</title>
<style>
/* Suas regras de estilo CSS aqui */
</style>
</head>
<body>
<span class="tooltip" data-tooltip="Este é um tooltip">Elemento com tooltip</span>
</body>
</body>
</html>
Estilizando o tooltip e adicionando interatividade
Após criar os elementos de tooltip, podemos estilizá-los usando as regras de CSS que definimos anteriormente. Podemos ajustar a posição, cor, tamanho e outros atributos do tooltip para obter o visual desejado.
Por fim, vamos adicionar interatividade aos nossos tooltips. Faremos isso usando as pseudo-classes hover e active para exibir e ocultar os tooltips quando o usuário interagir com os elementos específicos.
Aqui está um exemplo de como estilizar o tooltip:
.tooltip {
position: relative;
}
.tooltip::before {
content: attr(data-tooltip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
background-color: #000;
color: #fff;
font-size: 14px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.tooltip:hover::before,
.tooltip:active::before {
opacity: 1;
visibility: visible;
}
Exemplos de Tooltip só com HTML e mais CSS
Aqui estão alguns exemplos de tooltips personalizados que você pode criar usando HTML simples, ou então com CSS:
<span title="Este é um tooltip">Elemento com tooltip</span>
<span class="tooltip" data-tooltip="Tooltip personalizado">Elemento com tooltip</span>
.tooltip {
position: relative;
}
.tooltip::before {
content: attr(data-tooltip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
background-color: #000;
color: #fff;
font-size: 14px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.tooltip:hover::before,
.tooltip:active::before {
opacity: 1;
visibility: visible;
}
Dicas onde usar tooltips?
- Adicione tooltips em botões para fornecer descrições rápidas sobre a funcionalidade.
- Utilize tooltips em links para exibir informações adicionais sobre o destino do link.
- Utilize tooltips em elementos de formulário para fornecer dicas sobre o preenchimento correto dos campos.
Conclusão
Neste tutorial, aprendemos como criar tooltips utilizando apenas HTML. Vimos como adicionar tooltips simples utilizando o atributo “title” em HTML e também como estilizá-los e adicionar interatividade a mais utilizando CSS.
Com esse conhecimento, você poderá melhorar a experiência do usuário em seus projetos web, fornecendo informações adicionais de forma intuitiva.
Experimente diferentes estilos e variações de tooltips para criar uma experiência interativa e informativa para seus usuários.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
