@juanzbdev/tooltip-react

Un componente de Tooltip para React moderno, ligero, fluido y altamente personalizable.

Desarrollado con las mejores prácticas: animaciones fluidas (fade-in / fade-out), acoplamiento perfecto de bordes, y soporte total para Tailwind CSS o CSS puro.

Características

• Animaciones fluidas: Transiciones suaves de entrada y salida gracias al manejo avanzado del ciclo de vida en React.
• Bordes Dinámicos: La flecha del tooltip hereda dinámicamente el grosor y color del borde, fusionándose como una sola pieza (gracias al uso inteligente de drop-shadow).
• Agnóstico al CSS: Estilos neutros por defecto. Úsalo como lienzo en blanco con Tailwind CSS o tus propios estilos en línea.
• Portales de React: Renderizado seguro fuera de la jerarquía del DOM para evitar problemas con overflow: hidden o z-index.
• Cero dependencias pesadas: Construido nativamente sobre React.

Instalación

DEMO: -->> https://tooltip-react-jz.vercel.app

Puedes instalarlo utilizando tu gestor de paquetes favorito:

npm install @juanzbdev/tooltip-react

pnpm add @juanzbdev/tooltip-react

yarn add @juanzbdev/tooltip-react

Uso Básico

1. Importa el componente (¡los estilos se inyectan automáticamente!).
2. Envuelve el elemento que disparará el tooltip.

import { Tooltip } from "@juanzbdev/tooltip-react";

export default function App() {
    return (
        <div style={{ padding: "50px" }}>
            <Tooltip label="¡Hola, soy un tooltip!" position="top">
                <button>Pasa el mouse sobre mí</button>
            </Tooltip>
        </div>
    );
}

Personalización (Tailwind / CSS)

El componente está diseñado para ser moldeable. Puedes sobreescribir completamente su apariencia usando la prop className (ideal para Tailwind CSS) o la prop style.

<Tooltip
    label="Tooltip verde y redondeado"
    position="right"
    style={{
        backgroundColor: "#10b981",
        borderColor: "#059669",
        borderRadius: "12px",
    }}
>
    <button>Hover me</button>
</Tooltip>

¡Magia!: La flecha heredará automáticamente el color de fondo y del borde, adaptándose perfectamente a tu diseño sin que tengas que hacer trucos adicionales.

Props (API)

Prop	Tipo	Por defecto	Descripción
label (*)	ReactNode	-	El texto o componente que se mostrará dentro del tooltip.
children (*)	ReactNode	-	El elemento (ej. botón) sobre el cual se hará hover para mostrar el tooltip.
position	'top' | 'bottom' | 'left' | 'right'	'top'	La dirección hacia donde aparecerá el tooltip.
showArrow	boolean	true	Muestra u oculta la flecha del tooltip.
disabled	boolean	false	Desactiva temporalmente el tooltip para que no se muestre al hacer hover.
delayHide	number	0	Retardo en milisegundos (ms) que el tooltip esperará antes de desaparecer al quitar el mouse.
className	string	""	Clases CSS adicionales (ej. Tailwind) para la caja del tooltip.
style	CSSProperties	{}	Estilos en línea para personalizar la caja del tooltip.
containerClassName	string	"react-tooltip-container"	Clase CSS para el contenedor que envuelve a los children.

Licencia

MIT