[ Conteúdo ] Crie tooltips rápido,eficiente e bonito com apenas HTML e CSS!
Descrição:
Recentemente eu descobri uma forma de criar tooltips apenas com HTML e CSS, o que é muito legal pois diminui a necessidade de utilizar JavaScript para algo tão simples. Além disso, irei mostrar um exemplo de como fazer utilizando Tailwindcss, caso você faça parte do time que odeie CSS puro.
O que precisamos?
Simples, tudo que você precisa é de qualquer coisa que possa escrever HTML e CSS, que pode ser até o bloco de notas. Além disso é importante ter familiaridade com HTML e ao menos um pouco com CSS
Para o exemplo com Tailwindcss, é importante que tenha os conhecimentos acima, e conhecimento sobre como o Tailwindcss funciona no geral. Você pode encontrar a documentação do Tailwindcss neste link: Tailwindcss
Resultado esperado:
O resultado será como este aqui:
Lembrando que o tooltip é completamente personalizavél ao seu gosto com CSS.
Uma pincelada antes do exemplo:
Para atingir este objetivo iremos utilizar um atributo bem interessante do HTML que eu aposto que poucos conhecem, chamado de data-*.
O que é o atributo data-*? Este atributo permite armazenar um valor associado a um elemento especifico do HTML. Por exemplo:
<div data-information="Eu pertenço a esta div!"></div>
Esta informação é invisível, e tem como finalidade ser extraída tanto no CSS, quanto no JavaScript. Como para este exemplo não é necessário utilizar JavaScript, focaremos no CSS.
Outro ponto a ser observado antes de prosseguir é: Qualquer valor armazenado dentro de data-* é convertido em string. Além disso, você pode estranha a sintaxe data-*, mas é isto que torna este atributo mágico!
O asterisco, também chamado de coringa as vezes, significa qualquer coisa na maioria dos casos. Aqui não é diferente. O atributo possui o prefixo data-, e o que vêm a seguir pode ser qualquer coisa!
Exemplos:
<div data-information="Eu pertenço a esta div!"></div>
<div data-hi="Eu pertenço a esta div!"></div>
<div data-i-really-like-programming-world="Eu pertenço a esta div!"></div>
<div data-tooltip="Eu pertenço a esta div!"></div>
<div data-is-invalid="Eu pertenço a esta div!" data-error-unknown="Eu também pertenço a esta div!"></div>
Você pode ver mais sobre
data-*aqui: Use Data Attributes
Examplo prático:
Começaremos com o HTML:
<div data-tooltip="Adicionar tópico" class="tooltip">Adicionar</div>
<div data-tooltip="Classificar tópicos" class="tooltip">Classificar</div>
<div data-tooltip="Modo Deletar" class="tooltip">Deletar</div>
Tudo que fizemos aqui:
- Criamos 3
<div>; - adicionamos nosso
data-*atributo com o nome detooltippara ficar semântico; - atribuímos uma classe chamada
tooltip;
Agora no CSS:
/* configuração básica para a <div>. */
.tooltip {
position: relative;
cursor: pointer;
/* Estilos para o tooltip */
&::after {
position: absolute; /* Seu posicionamento é relativo a div pai */
content: attr(data-tooltip) /* extrai o valor do atributo */
/* para centralizar o elemento */
left: 50%;
transform: translateX(-50%);
/* Ajuste conforme necessário */
bottom: 120%;
/* estilos para dar o charme */
padding: 0.62rem; /* aproximadamente 10px */
border-radius: 1.25rem; /* 20px */
background-color: #212121;
color: #eeeeee;
white-space: nowrap;
/* ele é invisível por padrão*/
visibility: hidden;
}
&:hover::after {
/* Quando passar por cima da <div>, o tooltip irá aparecer */
visibility: visible;
}
}
Pronto, simples, não? Se você colar ai na sua IDE, irá ser bem simples. Porém você pode costumizar a sua vontade tranquilamente. Inicalmente eu fiz o meu com animação de fade-in, que pode ser alcançado facilmente com animations. Algo como:
.tooltip {
position: relative;
cursor: pointer;
/* Estilos para o tooltip */
&::after {
position: absolute; /* Seu posicionamento é relativo a div pai */
content: attr(data-tooltip) /* extrai o valor do atributo */
/* para centralizar o elemento */
left: 50%;
transform: translateX(-50%);
/* Ajuste conforme necessário */
bottom: 120%;
/* estilos para dar o charme */
padding: 0.62rem; /* aproximadamente 10px */
border-radius: 1.25rem; /* 20px */
background-color: #212121;
color: #eeeeee;
white-space: nowrap;
/* ele é invisível por padrão*/
visibility: hidden;
}
&:hover::after {
/* Quando passar por cima da <div>, o tooltip irá aparecer */
animation: fade-in 0.4s forwards ease-in;
}
}
@keyframe fade-in {
0% {
display: none;
visibility: hidden;
opacity: 0;
}
100% {
display: block;
visibility: visible;
opacity: 1;
}
}
Agora vamos para o exemplo do Tailwindcss:
Criando no Tailwindcss:
Irei considerar que você tem o
Tailwindcssinstalado e que sabe utiliza-lo.
O processo é literalmente o mesmo, mas utilizando as classes do tailwindcss, como abaixo:
<div data-tooltip="Classificar Tópicos" className={`relative whitespace-nowrap w-fit h-fit after:content-[attr(data-tooltip)] after:absolute px-5 after:left-2/4 after:translate-x-[-50%] after:bg-slate-700 after:border after:border-slate-500 after:rounded-lg after:bg-red after:text-white after:invisible hover:after:visible`}>
<IconButton>
<ArrowDownUp strokeWidth={1.5} absoluteStrokeWidth={true} className="h-full w-full"/>
</IconButton>
</div>
Neste exemplo eu crei uma div, assim como no exemplo apenas com HTML e CSS. Coloquei um componente fictício para simular uma estrutura básica do dia a dia com frameworks como Next.js.
O <ArrowDownUp strokeWidth={1.5} absoluteStrokeWidth={true} className="h-full w-full"/> é apenas um svg fictício do lucide.
A única parte importante é a div com as classes e o data-tooltip.
Pronto, agora você pode criar tooltips apenas com HTML e CSS ou integrar ao seu projecto que utiliza Tailwindcss.
Conclusão:
HTML e CSS realmente evoluíram muito! A projetos que possui uma dependência apenas para ter este efeito.
O ideal e no dia a dia é usar com Tailwindcss. Criar um componente personalizavél e reutilizar em seu projeto.
Espero que tenham gostado!
