Utilizando Hover PopUp e Tooltip com Tailwind CSS

Se você se encontra atualmente envolvido com o universo frontend em qualquer grau que seja, sem a menor sombra de dúvidas já deve ter pelo menos ouvido falar no nome Tailwind CSS (e se não ouviu ainda, considere-se agraciado, pois este artigo também é para você!).

Diante de tantas e tantas funcionalidades que o Tailwind nos oferece, escolhemos uma dentre as de grande importância que existem para destrinchar neste artigo. Juntos, aprenderemos a criar pop-ups e tooltips de duas formas diferentes: primeiro utilizando apenas o Tailwind CSS e depois com o auxílio da biblioteca Flowbite.

Para isso, construiremos um projeto React.js e implementaremos dois componentes, um para cada conceito que será abordado. Mas calma! Se você chegou até aqui sem ter conhecido o React e o Tailwind, não se preocupe. Como já foi dito, chegou o seu momento!

O que é o React e o Tailwind CSS?

O React é uma biblioteca JavaScript de código aberto e utilizado por diversas empresas famosas, como o Facebook, o Instagram, etc. Focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o JavaScript puro, o React foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

Já o Tailwind é um framework CSS criado com o objetivo de otimizar o seu uso. Ao invés da estilização ser feita por tags que possuem diversos atributos definidos em um arquivo importado com extensão .css, sua utilização exclui essa necessidade já que cada atributo (como por exemplo width, height, display ou position) possui uma classe com um nome pré-definido pelo Tailwind e está disponibilizado em sua documentação.

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind, que além de ser auto intuitivo possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo font-size, font-weight, ou text-decoration) que é disponibilizado todo um passo a passo de como o utilizar o framework.

O que é o Flowbite?

Flowbite e uma biblioteca de código aberto com mais de 450 componentes (interface, seções, paginas, etc.) criados a partir das classes do Tailwind CSS, disponível para React.js, Vue.js, Svelte e Angular, entre outros. Iremos utilizá-lo para otimizar algumas competências do Tailwind CSS!

Instalando React, Tailwind e Flowbite

A primeira coisa que faremos será inicializar um projeto onde iremos realizar todo o passo a passo. Para isto, vamos criar um projeto React e instalar o Tailwind CSS e o Flowbite com os comandos a seguir que devem ser executados no seu terminal. Se tudo der certo, ao fim da execução destes comandos, será aberto no browser uma página com o símbolo do React em movimento:

npx create-react-app hover-popup

cd hover-popup

npm install

npm install -D tailwindcss postcss autoprefixer

npm i flowbite flowbite-react

npx tailwindcss init -p

npm start

Uma vez instalado o Tailwind, precisamos configurá-lo. Primeiro, substitua o conteúdo do arquivo tailwind.config.js que foi criado durante a instalação do framework pelo código que está disposto logo a seguir. Esta implementação fará com que o Tailwind seja utilizado em todos os arquivos do projeto que possuam as extensões js, jsx, ts e tsx, assim como também garantirá o funcionamento efetivo do Flowbite:

/**@type {import('tailwindcss').Config} */

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}",

“node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}”,

],

theme: {

extend: {},

},

plugins: [

require('flowbite/plugin')

],

}

Por fim, no arquivo .css do seu projeto, substitua todo o conteúdo existente nele pelas seguintes sentenças (no nosso caso, faremos este processo no arquivo App.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Você pode testar se a instalação e configuração do Tailwind funcionaram criando uma classe bg-yellow-500 para o container principal do projeto. Se o plano de fundo adquirir a cor amarela, quer dizer que deu tudo certo e o Tailwind foi instalado e implementado corretamente. Não se esqueça de apagar a classe bg-yellow-500 após constatar que o uso do framework funcionou, OK?

Explorando o Flowbite

Imagine um cenário em que você gostaria que, em um local da sua página, uma determinada imagem aparecesse quando você passasse o mouse por sobre um botão. Se fosse utilizar as funcionalidades do React, você provavelmente utilizaria neste botão as propriedades onMouseOver e onMouseOut para adicionar e remover de um determinado estado a referência da imagem relacionada ao botão que gerou o evento.

Depois, utilizaria este estado para criar a imagem no local desejado, alcançando assim o objetivo. Como desejamos praticar o Tailwind CSS neste artigo, não iremos por este caminho: primeiro começaremos vendo como é possível fazer isso utilizando o Flowbite!

Vamos começar criando o componente FlowBite que conterá um array de nomes de imagens que utilizaremos para a exibição. Depois, criaremos neste componente um ícone para cada imagem no array, por meio de um map:

Para que seja possível relacionar elementos com o fruto da parceria entre React, Tailwind e Flowbite (que por sinal já importamos na linha 2 da figura 1), basta apenas utilizarmos algumas propriedades que nos são disponibilizadas. Para este projeto, utilizaremos três delas:

• data-tooltip-target: Recebe como valor o id do elemento que surgirá na tela ao desencadear-se um determinado evento, que neste caso será passar o mouse sobre o botão;
  
• data-tooltip-placement: Por meio desta propriedade é possível informar em que posição em relação ao item (que no nosso caso será o botão) o elemento surgirá (no nosso caso, será uma imagem);
  
• data-tooltip-trigger: Aqui registramos qual será a ação que irá desencadear o popup (no nosso caso será hover, ou seja, ao passar o mouse por cima do elemento).
  

Uma vez que já criamos uma lista de botões com um número correspondente ao tamanho do array de nome de imagens, utilizaremos um outro map para criar todas as imagens existentes no array:

Você verá que apenas uma única imagem aparecerá. Isso acontece porque criamos uma imagem na linha 20 da figura 3 que servirá de referência como plano de fundo quando os botões não estiverem acionando algum evento.

Importante destacar também que utilizamos a classe absolute para que todas as imagens estejam no mesmo local, sobrepostas umas às outras, para que sejam selecionadas à frente quando o seu respectivo botão desencadear o evento de hover. Na lista de botões criados, vamos inserir as três propriedades mencionadas há pouco: data-tooltip-target, data-tooltip-placement e data-tooltip-trigger:

Utilizamos os valores passados nas linhas 28 e 14 da figura 5 para, respectivamente, criar um id igual ao valor contido em cada posição do array e atribuir estes ids criados para botões. Desta forma, cada botão irá acionar uma imagem diferente.

Depois, definimos que estas imagens serão visíveis abaixo dos botões, utilizando o valor bottom na linha 15 da figura 5. Por fim, declaramos que a ação que desencadeará o surgimento de uma imagem será passar o mouse por cima de algum botão (hover).

Utilizando apenas o Tailwind

O Flowbite é muito usual para casos em que o elemento a ser exibido precisa aparecer em um container específico, como por exemplo o quinto container de uma fila, ou aquela barra lateral isolada do restante do conteúdo, entre outros. Todavia, você também pode optar por implementações ainda mais simples, utilizando apenas o Tailwind CSS.

Imagine agora que você deseja que uma mensagem surja na tela quando você passar o mouse por sobre um botão. Construiremos esta funcionalidade por meio do uso dos pseudo-elementos before e after, conforme veremos a seguir:

Primeiramente, utilizamos uma funcionalidade do Tailwind que permite que sejam importados para dentro da classe valores de propriedades do elemento, com o uso do [attr(nome-da-propriedade)].

Na figura 7, passamos para o content do before um texto encontrado na propriedade data-tip. Depois, vinculamos algumas classes para o before onde definimos uma cor para o background, um arredondamento de borda, uma posição absoluta, um espaçamento interno, um deslocamento no eixo y, um conjunto de transições e, por fim, uma opacidade 0.

Esta última também pode ser encontrada no after e é usada em ambos para que iniciem ocultos e só surjam por meio da interação com o botão. Para tal, temos dois hovers nas linhas 21 e 22, um para cada pseudo-elemento, onde a opacidade volta à visibilidade. Desta forma, quando passamos o mouse por cima do elemento, uma mensagem é exibida, com o texto que passamos como valor para a propriedade data-tip. Quando retiramos o mouse de cima do elemento, a mensagem é oculta, voltando para a opacidade 0.7.

Considerações finais

Aprendemos neste artigo duas formas de se aproveitar o uso de pop-ups e tooltips com o Tailwind. Como você pôde ver, ambas as opções de implementação têm suas particularidades e se aplicam melhor em algumas situações do que em outras.

Buscando um melhor aprendizado, você pode utilizar a base destes conhecimentos e criar diversos projetos com abordagens diferentes para praticar e ir você mesmo decidindo qual deles irá utilizar. Aproveita e deixa nos comentários do post quais foram suas ideias e em quais aplicações seria incrível utilizar o Tailwind com e sem o Flowbite!

Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn!

Te espero ansiosamente!