Hover PopUp y Tooltip con Tailwind CSS

Si actualmente te relacionas con el universo frontend sin importar el nivel, seguro has escuchado sobre Tailwind CSS, y si aún no lo conoces, es tu día de suerte porque este artículo te ayudará a comprender de qué trata.

Ante tantas características que nos ofrece Tailwind, hemos elegido una de las más importantes para desarrollarla en este artículo. Juntos, aprenderemos a crear ventanas emergentes (popups) e información sobre herramientas (tootips) de dos maneras diferentes: primero usando solo Tailwind CSS y luego con la ayuda de la biblioteca Flowbite.

Para ello, construiremos un proyecto React.js e implementaremos dos componentes, uno para cada concepto que se abordará. ¡Pero calma! Si has llegado hasta aquí sin conocer React y Tailwind, no te preocupes. Como ya se ha dicho, ¡estás de suerte!

¿Qué es React y Tailwind CSS?

React es una biblioteca JavaScript de código abierto, utilizada por muchas empresas famosas como Facebook, Instagram, etc. Se enfoca en crear interfaces de usuario de una manera mucho más práctica que usar JavaScript puro, por lo que ha ganado cada vez más espacio al ser fácil de asimilar, comprender y adaptar.

Por su parte, Tailwind es un framework CSS creado con el objetivo de optimizar su uso. En lugar de hacer estilizaciones mediante tags que poseen diversos atributos definidos en un archivo importado con extensión .css, su uso excluye esa necesidad ya que cada atributo (como por ejemplo width, height, display o position) posee una clase con un nombre predefinido por Tailwind, disponible en su documentación.

Enfocado en el desarrollo mobile-first, Tailwind acelera todo el proceso de estilización, que además de ser intuitivo posee una documentación de fácil aprendizaje y búsqueda rápida: basta colocar el nombre del atributo (como por exemplo font-size, font-weight o text-decoration) y se contará con un paso a paso sobre cómo utilizar el framework.

¿Qué es Flowbite?

Flowbite es una biblioteca de código abierto con más de 450 componentes (interface, seções, paginas, etc.) creados a partir de las clases de Tailwind CSS, disponible para React.js, Vue.js, Svelte y Angular, entre otros. ¡Lo utilizaremos para optimizar algunas competencias de Tailwind CSS!

Instalando React, Tailwind y Flowbite

Lo primero que haremos será iniciar un proyecto donde realizaremos todo el proceso paso a paso. Para esto, crearemos un proyecto React e instalaremos Tailwind CSS y Flowbite con los siguientes comandos que deben ejecutarse en tu terminal. Si todo va bien, al ejecutar estos comandos se abrirá en el navegador una página con el símbolo de React en movimiento:

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

Una vez instalado Tailwind, debemos configurarlo. Primero, reemplaza el contenido del archivo tailwind.config.js creado durante la instalación del framework con el código que se muestra a continuación. Esta implementación hará que Tailwind sea utilizado en todos los archivos de proyecto que tengan extensiones js, jsx, ts y tsx, además de garantizar el funcionamiento efectivo de 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')

],

}

Finalmente, en el archivo .css de tu proyecto, reemplaza todo el contenido existente con las siguientes oraciones (en nuestro caso, haremos este proceso en el archivo App.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Puedes probar si la instalación de Tailwind funcionó bien creando una clase bg-yellow-500 para el container principal del proyecto. Si el fondo se torna amarillo, quiere decir que tudo salió bien y que Tailwind opera sin problemas. Recuerda desactivar la clase bg-yellow-500 una vez que verifiques que todo funcionó, ¿OK?

Explorando Flowbite

Imagine un escenario en el que te gustaría que una determinada imagen apareciera en algún lugar de tu página cuando pases el mouse sobre un botón. Si usaras las funcionalidades de React, probablemente elegirías onMouseOver y onMouseOut en este botón para agregar y eliminar de un estado la referencia de imagen relacionada con el botón que generó el evento.

Posteriormente, usarías dicho estado para crear la imagen en la ubicación deseada, logrando así el objetivo. Como queremos practicar Tailwind CSS en este artículo, no iremos por ese camino: ¡nos enfocaremos en Flowbite!

Comenzaremos creando el componente FlowBite que contendrá un array de nombres de imágenes que utilizaremos para la muestra. Después, crearemos en este componente un ícono para cada imagen en el array, por medio de un map:

Para relacionar elementos resultantes de la asociación entre React, Tailwind y Flowbite (que, por cierto, ya hemos importado en la línea 2 de la figura 1), solo necesitamos usar algunas propiedades que se ponen a disposición. En este proyecto, utilizaremos tres:

• data-tooltip-target: Recibe como valor el id del elemento que aparecerá en pantalla cuando se dispare un determinado evento, que en este caso será al pasar el mouse sobre el botón;
  
• data-tooltip-placement: A través de esta propiedad es posible informar en qué posición con relación al ítem (que en nuestro caso será el botón) aparecerá el elemento (en nuestro caso será una imagen);
  
• data-tooltip-trigger: Aquí registramos cuál será la acción que desencadenará el popup (en nuestro caso será hover, es decir, al pasar el mouse por encima del elemento).

Una vez creada la lista de botones con un número correspondiente al tamaño del array de nombre de imágenes, utilizaremos otro map para generar todas las imágenes existentes en el array:

Verás que solo aparecerá una única imagen. Esto sucede porque creamos una imagen en la línea 20 de la Figura 3 que servirá como referencia de fondo cuando los botones no activen un evento.

Es importante destacar también que utilizamos la clase absolute para que todas las imágenes estén en el mismo lugar, sobrepuestas unas con otras, para que sean seleccionadas al frente cuando su respectivo botón desencadene el evento de hover. En la lista de botones creados, insertaremos las tres propiedades mencionadas hace poco: data-tooltip-target, data-tooltip-placement y data-tooltip-trigger:

Utilizamos los valores de las líneas 28 y 14 de la figura 5 para, respectivamente, crear un id igual al valor contenido en cada posición del array y atribuir estos ids creados a los botones. De esta forma, cada botón activará una imagen diferente.

Después, definimos que estas imágenes sean visibles debajo de los botones, utilizando el valor bottom en la línea 15 de la figura 5. Finalmente, declaramos que la acción que desencadenará el surgimiento de una imagen será pasar el mouse por encima de algún botón (hover).

Utilizando Tailwind

Flowbite es muy común para los casos en los que el elemento a mostrar debe aparecer en un contenedor específico, como el quinto contenedor en una fila, o esa barra lateral aislada del resto del contenido, entre otros. Sin embargo, también puede optar por implementaciones aún más simples, usando solo Tailwind CSS.

Imagine ahora que desea que aparezca un mensaje en la pantalla cuando pasa el mouse sobre un botón. Construiremos esta funcionalidad mediante el uso de pseudo-elementos before y after, como veremos a continuación:

Primero, usamos una función Tailwind que permite importar valores de propiedades de elementos a la clase, usando [attr(property-name)].

En la figura 7, pasamos para el content de before un texto encontrado en la propiedad data-tip. Luego, vinculamos algunas clases para before donde definimos un color para el background, un redondeo de bordes, una posición absoluta, un espacio interior, un desplazamiento en el eje y, un conjunto de transiciones y, finalmente, una opacidad de 0.

Esta última también puede encontrarse en after y se usa en ambos para que inicien ocultos y solo surjan por medio de la interacción con el botón. Para ello, tenemos dos hovers en las líneas 21 y 22, uno para cada pseudoelemento, donde la opacidad vuelve a la visibilidad. De esta forma, cuando pasamos el mouse por encima del elemento, se mostrará un mensaje con el texto que compartimos como valor para la propiedad data-tip. Cuando retiramos el mouse de encima del elemento, se oculta el mensaje, regresando a la opacidade 0.7.

Consideraciones finales

En este artículo, aprendimos dos formas de aprovechar el uso de pop-ups y tooltips con Tailwind. Como puedes ver, ambas opciones de implementación tienen sus particularidades y se aplican mejor en algunas situaciones que en otras.

Buscando un mejor aprendizaje, puedes utilizar estos conocimientos y crear diversos proyectos con enfoques diferentes para practicar y decidir, por ti mismo/a, cuál utilizar.

Si este artículo te pareció interesante, quieres compartir alguna duda o tienes nuevas ideas sobre éste u otros asuntos, ¡contáctame por e-mail bruno.cabral.silva2018@gmail.com o en mi perfil do LinkedIn!

¡Saludos!