Tooltip só com HTML: Como criar, tutorial passo a passo

Indicação
Como criar tooltip só com HTML

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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação 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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.