Creando un Tooltip reutilizable con JavaScript Vanilla

Por qué crear tu propio tooltip reutilizable

Los tooltips son uno de los componentes más utilizados en cualquier interfaz moderna. Aunque visualmente parecen sencillos, una implementación profesional debe resolver problemas relacionados con el posicionamiento dinámico, accesibilidad, interacción mediante teclado, soporte para contenido HTML y adaptación al viewport.

En este artículo construiremos un Tooltip reutilizable con JavaScript Vanilla, diseñado para ser flexible, extensible y fácil de integrar en cualquier proyecto.

Qué problemas debe resolver un tooltip moderno

Un tooltip reutilizable debería ser capaz de:

• Posicionarse respecto a cualquier elemento.
• Soportar múltiples posiciones.
• Reposicionarse automáticamente cuando no exista espacio suficiente.
• Permitir contenido dinámico.
• Soportar contenido HTML.
• Funcionar con hover, focus o click.
• Ser accesible mediante teclado.
• Exponer una API programática.
• Limpiar correctamente los eventos al destruir la instancia.

Características del componente

La implementación desarrollada incluye:

• Inicialización automática mediante data-toggle="tooltip".
• API programática.
• content.
• placement.
• auto placement.
• allowHTML.
• trigger.
• arrow.
• delay.
• classNames.
• Métodos show(), hide(), toggle() y destroy().
• Eventos personalizados.
• Reposicionamiento automático.

Estructura HTML mínima

<button data-toggle="tooltip" data-tooltip-content="Tooltip superior" data-tooltip-placement="top">Hover aquí</button>

Inicialización automática

import { Tooltip } from "./tooltip.js";

Tooltip.initAll();

Cómo funciona la inicialización declarativa

Cualquier elemento que incluya:

data-toggle="tooltip"

será detectado automáticamente por:

Tooltip.initAll();

y recibirá una instancia independiente del componente.

Inicialización programática

const tooltip = new Tooltip("#button", {
  content: "Tooltip creado desde JavaScript",
  placement: "right"
}).init();

Tooltip con contenido HTML

new Tooltip("#html-tooltip", {
  content: `
    <strong>Tooltip con HTML</strong>
    <br>
    <small>Contenido dinámico</small>
  `,
  allowHTML: true
}).init();

Casos de uso

Tooltip básico con hover

<button data-toggle="tooltip" data-tooltip-content="Tooltip superior" data-tooltip-placement="top">Hover aquí</button>

Tooltip mediante click

<button data-toggle="tooltip" data-tooltip-content="Tooltip inferior" data-tooltip-placement="bottom" data-tooltip-trigger="click">Click aquí</button>

Tooltip manual

const tooltip = new Tooltip("#manual-tooltip", {
  content: "Tooltip controlado manualmente",
  trigger: "manual"
}).init();

tooltip.show();
tooltip.hide();
tooltip.toggle();

Tooltip con auto placement

new Tooltip("#button", {
  placement: "auto"
}).init();

API pública

show()

Muestra el tooltip.

tooltip.show();

hide()

Oculta el tooltip.

tooltip.hide();

toggle()

Alterna el estado actual.

tooltip.toggle();

destroy()

Destruye la instancia y elimina eventos.

tooltip.destroy();

Accesibilidad

El componente implementa:

• role="tooltip".
• aria-describedby.
• Soporte para focus.
• Cierre mediante Escape.

Demo interactiva en CodePen

Conclusión

Crear un Tooltip reutilizable con JavaScript Vanilla permite entender mejor cómo diseñar componentes UI desacoplados, accesibles y preparados para producción.

La combinación de atributos data-*, una API programática y un sistema de posicionamiento inteligente convierte este componente en una base sólida para cualquier proyecto frontend moderno.