Creando un Componente Tooltip en ReactJS: Guía Paso a Paso

Autor: rioyi | Lectura: 4 minutos | Nov 29, 2024

En este tutorial, te guiaré para crear un componente Tooltip sencillo pero funcional, que podrás personalizar y usar en tus propios proyectos.

Creando un Componente Tooltip en ReactJS: Guía Paso a Paso

Estos componentes te ayudan a construir interfaces de usuario más eficientes y fáciles de mantener.

¿Qué es un Tooltip?

Un Tooltip es una pequeña ventana que aparece al pasar el cursor sobre un elemento, mostrando información adicional sobre ese elemento. Por ejemplo, si tienes un ícono y quieres que al pasar el cursor sobre él se muestre una descripción, un Tooltip es ideal.

En este tutorial, aprenderás a implementar un Tooltip utilizando React y algunas herramientas clave como React Portals y Hooks.

Estructura del Proyecto

Para seguir este tutorial, asegúrate de tener un proyecto React configurado. Si no lo tienes, puedes crear uno rápidamente con:

npx create-react-app tooltip-example

Luego, abre el proyecto y crea un archivo para tu componente:

src/Tooltip.jsx

Ahora estamos listos para construir el componente.

Paso 1: Configurando el Componente Tooltip

Primero, escribe el código básico del componente Tooltip. Este es el esquema inicial:

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const Tooltip = ({ children, content }) => {
  const [visible, setVisible] = useState(false);
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  return (
    <>
      <div
        ref={triggerRef}
        onMouseEnter={() => setVisible(true)}
        onMouseLeave={() => setVisible(false)}
        style={{ display: "inline-block" }}
      >
        {children}
      </div>
      {visible &&
        ReactDOM.createPortal(
          <div
            ref={tooltipRef}
            style={{
              position: "absolute",
              top: position.top,
              left: position.left,
              backgroundColor: "black",
              color: "white",
              padding: "8px",
              borderRadius: "4px",
              zIndex: 1000,
            }}
          >
            {content}
          </div>,
          document.body
        )}
    </>
  );
};

export default Tooltip;

Paso 2: Añadiendo Lógica para Posicionar el Tooltip

El Tooltip debe aparecer justo encima del elemento al que está asociado. Para ello, usaremos getBoundingClientRect, que calcula las dimensiones y la posición de los elementos en la pantalla.

Actualiza el componente para incluir la lógica de posicionamiento:

useEffect(() => {
  const updatePosition = () => {
    if (triggerRef.current && tooltipRef.current) {
      const triggerRect = triggerRef.current.getBoundingClientRect();
      const tooltipRect = tooltipRef.current.getBoundingClientRect();

      setPosition({
        top: triggerRect.top - tooltipRect.height - 8, // Espacio de 8px
        left: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2,
      });
    }
  };

  if (visible) {
    updatePosition();
    window.addEventListener("resize", updatePosition);
    window.addEventListener("scroll", updatePosition);
  }

  return () => {
    window.removeEventListener("resize", updatePosition);
    window.removeEventListener("scroll", updatePosition);
  };
}, [visible]);

Paso 3: Aplicando Estilos

Puedes usar estilos en línea o una biblioteca como Tailwind CSS para estilizar tu Tooltip. En este caso, usamos estilos básicos en línea:

<div
  ref={tooltipRef}
  style={{
    position: "absolute",
    top: position.top,
    left: position.left,
    backgroundColor: "black",
    color: "white",
    padding: "8px",
    borderRadius: "4px",
    zIndex: 1000,
    boxShadow: "0px 4px 6px rgba(0,0,0,0.1)",
  }}
>
  {content}
</div>

Si prefieres usar Tailwind CSS, reemplaza los estilos en línea por clases como estas:

className="absolute z-50 bg-black text-white text-sm rounded py-1 px-2 shadow-lg"

Paso 4: Cómo Usar el Componente Tooltip

Para usar el Tooltip, envuelve el elemento al que quieres añadir el Tooltip con el componente, y pasa el contenido del Tooltip como una prop content.

import React from "react";
import Tooltip from "./Tooltip";

const App = () => {
  const name = "Rioyi"
  return (
    <div style={{ padding: "100px" }}>
      <Tooltip key={index}
              content={
                <div>
                  <strong>{name}</strong>
                </div>
              }>
        <button style={{ padding: "8px 16px" }}>Pasa el cursor aquí</button>
      </Tooltip>
    </div>
  );
};

export default App;

Paso 5: Probando y Personalizando

Prueba el componente y verifica que el Tooltip aparezca correctamente al pasar el cursor sobre el botón. Puedes personalizar el componente según tus necesidades:

Posicionamiento: Cambia el cálculo en updatePosition para que el Tooltip aparezca a la derecha, izquierda, o debajo del elemento activador.
Estilos: Cambia el diseño del Tooltip para que combine con el estilo de tu aplicación.
Animaciones: Usa transiciones CSS para animar la aparición y desaparición del Tooltip.

Conclusión

Has creado un Tooltip reutilizable en ReactJS utilizando herramientas esenciales como useState, useRef, useEffect y React Portals. Este componente es una base sólida que puedes expandir para añadir funcionalidades avanzadas como soporte para diferentes posiciones, eventos personalizados y animaciones.

¡Sigue practicando y experimentando con React para seguir mejorando tus habilidades como desarrollador! 🚀

¿Disfrutas mi contenido?

¡Considera invitarme un café para apoyarme a manter los servidores!

Javascript Reactjs Tutorial