Un tooltip, ese diminuto elemento de interfaz que o salva al usuario o lo exaspera sin remedio. Pasa el cursor sobre un icono esperando una pista y recibe: un cuadro vacío, texto truncado o una ventana emergente que se escapó del borde de la pantalla.

Escribir tooltips desde cero a mano implica lidiar con el posicionamiento, el z-index, el diseño responsive y las animaciones. Las librerías ya hechas resuelven todo esto con un par de líneas de código. Pero, ¿cuál elegir cuando el mercado ofrece docenas de opciones, desde fragmentos de CSS microscópicos hasta frameworks completos para tours de producto?

Recopilamos 21 plugins de código abierto para tooltips en JavaScript, jQuery y CSS puro, con capturas de pantalla reales y desgloses honestos de sus capacidades. Aquí encuentra herramientas para cualquier escenario: un tooltip rápido para una landing page, un tooltip con contenido HTML para una aplicación web y una incorporación paso a paso para SaaS.

💡 Resumen rápido:

• Elija una categoría: CSS puro, jQuery o JavaScript vanilla.
• Decida qué va dentro: solo texto o HTML con imágenes y botones.
• Revise el posicionamiento automático: para que el tooltip no se salga del borde de la pantalla.
• Para tours de producto, elija Intro.js o Hopscotch, están diseñados para la incorporación de usuarios.

Tabla general: 21 plugins en 30 segundos

1. Tippy.js

Tippy.js es el estándar de facto para tooltips en el frontend moderno. La librería del desarrollador atomiks está construida sobre Popper.js (posteriormente, Floating UI) y ofrece un posicionamiento impecable: el tooltip esquiva los bordes de la pantalla por sí solo, se voltea y se ajusta a la ventana gráfica.

Incluye todo lo necesario para una UI seria: animación mediante transiciones CSS, tooltips interactivos (puede hacer clic en el contenido sin que se cierre), seguimiento del cursor, tooltips anidados y renderizado diferido. Es compatible con React, Vue y DOM puro.

En nuestra experiencia, debería pasarse a Tippy.js cuando un proyecto supera el ecosistema de jQuery: la librería elimina la mayor parte de los quebraderos de cabeza con el posicionamiento sin una sola línea de CSS manual.

Ventajas: árbol de dependencias mínimo, tipado TypeScript de serie, documentación con ejemplos interactivos. Desventajas: resulta excesivo para un tooltip de texto simple en una landing page; el tamaño del bundle es de ~30 KB (aunque el tree-shaking ayuda).

🔗 Tippy.js en GitHub🔗 Documentación y demo

2. Tooltipster

Tooltipster es un veterano entre los plugins de jQuery para tooltips que no se ha quedado obsoleto. La librería funciona desde 2012 y sigue recibiendo actualizaciones. Su principal característica son cuatro temas de estilo listos para usar (predeterminado, claro, sin bordes, punk) más la posibilidad de crear el suyo propio mediante CSS.

Tooltipster maneja contenido HTML, carga AJAX, múltiples disparadores (hover, clic, foco, llamada programática), temporizadores de mostrar/ocultar y callbacks para cada etapa del ciclo de vida. Un plus adicional es el soporte integrado para dispositivos táctiles: al tocar un elemento se muestra el tooltip, al tocar de nuevo se oculta.

En la práctica, Tooltipster encaja bien en proyectos sobre WordPress y el stack de jQuery, donde incorporar un bundle moderno desde npm resulta incómodo: basta con conectar el script, configurar las opciones y todos los enlaces con title se convierten en tooltips atractivos.

Ventajas: plugin maduro con comportamiento predecible, documentación excelente, soporte táctil. Desventajas: depende de jQuery (en 2026 esta ya es una dependencia que muchos quieren eliminar).

🔗 Tooltipster en GitHub

3. CSS Tooltip

Tooltip minimalista en CSS puro: un elemento HTML con data-tooltip, pseudoelementos ::before y ::after para la flecha y el fondo, más una transición suave al pasar el cursor. Sin JavaScript, ni siquiera necesita manejadores de eventos.

La solución es adecuada para contenido estático: blogs, documentación, páginas de aterrizaje. Pesa menos de un kilobyte, no requiere dependencias y no afecta el First Input Delay. Basta con copiar el fragmento CSS en el proyecto y colocar los atributos de datos.

Ventajas: cero JS, rendimiento instantáneo, fácil personalizar colores y espaciado. Desventajas: solo texto, sin posicionamiento automático, comportamiento limitado en móviles (no hay hover).

4. Tipr

Tipr es un pequeño plugin de jQuery (menos de 2 KB minificado) que hace exactamente una cosa: muestra un tooltip emergente al pasar el cursor sobre cualquier elemento HTML. Diseño plano, sin serifas, configuración mínima mediante atributos de datos.

Ideal cuando necesita que «simplemente funcione» sin abstracciones innecesarias. Soporta cuatro posiciones, clases personalizadas y cambio de disparador. Nuestro consejo es usar Tipr para proyectos pequeños donde jQuery ya existe y no desea añadir una dependencia separada para tooltips.

Ventajas: tamaño microscópico, API simple, no requiere configuración. Desventajas: abandonado por el autor, posicionamiento primitivo (puede cortarse en el borde de la pantalla).

Tipr está disponible en GitHub

5. CSS tooltip appear

Otra implementación en CSS puro, esta vez con énfasis en la animación de aparición. El tooltip se desliza suavemente, con duración y curva de aceleración personalizables. Adecuado para situaciones donde la función no es tan importante como la impresión visual: portafolios, páginas promocionales, sitios de presentación.

Ventajas: animación atractiva, CSS puro, sin scripts. Desventajas: solo texto, sin posicionamiento en los bordes de la pantalla, sin interactividad.

6. Grumble.js

Grumble.js destaca visualmente: el tooltip está estilizado como una burbuja de cómic y puede rotar alrededor del elemento objetivo 360 grados en incrementos de 1°. El desarrollador James Cryer creó el plugin específicamente para interfaces no estándar donde un rectángulo común se vería extraño.

El plugin no se ha actualizado en muchos años, pero como concepto y para proyectos personales sigue siendo interesante. No lo pondríamos en producción en un proyecto activo: versión obsoleta de jQuery en las dependencias y sin soporte móvil.

Ventajas: diseño único, control preciso del ángulo, animación agradable. Desventajas: sin soporte, jQuery anticuado, sin diseño responsivo.

🔗 Grumble.js en GitHub

7. Protip

Protip es un plugin de jQuery que se posicionó como «un tooltip para cualquier situación». Varios skins (incluido tema oscuro), transiciones animadas, cuatro posiciones y soporte HTML. Según el repositorio, el autor implementó una API con enfoque en la extensibilidad: se pueden anidar configuraciones y establecer valores predeterminados globales.

En la práctica, Protip es una opción sólida de nivel medio para proyectos con jQuery. No tan potente como Tooltipster, pero suficiente para escenarios básicos.

Ventajas: varios temas, API conveniente, animación. Desventajas: repositorio no actualizado, documentación escasa.

Protip está disponible en GitHub

8. Tipped

Tipped es una biblioteca JavaScript ligera y sin dependencias. Admite varios temas, tamaños y variantes de interacción: hover, clic, foco, llamada manual. El posicionamiento es fijo (cuatro lados), sin ajuste inteligente a los bordes; para interfaces simples esto es suficiente.

Tenga en cuenta que la biblioteca no se actualiza desde hace mucho tiempo y el soporte de la comunidad es mínimo. En 2026, para un proyecto nuevo recomendaríamos Tippy.js, pero si el proyecto ya usa Tipped y funciona, no tiene sentido cambiarlo.

Ventajas: sin dependencias, API simple, varios temas. Desventajas: sin posicionamiento automático, el proyecto parece abandonado.

Tipped está disponible en GitHub

9. Microtip

Microtip, del desarrollador Indrashish Ghosh, es una biblioteca de tooltips en CSS puro que pesa menos de 1 KB comprimido. Accesibilidad desde el primer momento (aria-label + role="tooltip"), animación por GPU (transform en lugar de top/left), fuente responsive.

Nuestro escenario favorito para Microtip son los iconos sin etiquetas en un panel de administración o interfaz: asigne aria-label, añada una clase y el usuario obtiene una pista sin una sola línea de JavaScript. La biblioteca se usa activamente en proyectos en GitHub (más de 3,5k estrellas), aunque no ha tenido actualizaciones importantes en los últimos dos años.

Ventajas: ultraligera, preparada para accesibilidad, no ralentiza el renderizado. Desventajas: solo texto, sin interactividad, posición fija.

🔗 Microtip en GitHub

10. Auto Tooltips

Auto Tooltips es una biblioteca JavaScript que elige automáticamente la posición óptima para un tooltip según el espacio disponible. A diferencia de Microtip o CSS Tooltip, aquí la pista puede saltar a otro lado del elemento si no hay suficiente espacio en el borde de la pantalla.

Visualmente, tooltips estilizados con sombra y esquinas redondeadas. La lógica de posicionamiento está escrita sin dependencias externas; la biblioteca completa cabe en unos pocos kilobytes.

Ventajas: posicionamiento automático, ligera, diseño elegante. Desventajas: repositorio inactivo, documentación mínima.

11. JBox

JBox no es solo un tooltip, sino un marco de diálogo universal sobre jQuery. Además de pistas emergentes, maneja ventanas modales, notificaciones (notice) y superposiciones a pantalla completa. Cada tipo de diálogo es un plugin separado dentro de una arquitectura común.

En nuestra experiencia, JBox funciona bien en proyectos donde se necesita un estilo visual unificado para todos los elementos emergentes. La biblioteca admite contenido AJAX, animación, callbacks y posicionamiento responsive. El tamaño se justifica por la funcionalidad: ~20 KB para un conjunto completo de componentes de diálogo.

Ventajas: cuatro tipos de diálogo en un paquete, buena documentación, soporte activo. Desventajas: dependencia de jQuery, excesivo si solo necesita tooltips.

🔗 JBox en GitHub

12. Wenk

Wenk (del hindi, «luciérnaga») es una biblioteca de tooltips en CSS que usa atributos de datos para el posicionamiento. Puede establecer la posición (data-wenk="left"), la longitud y el estilo de la flecha. Toda la magia está en CSS puro, más un archivo JS opcional para la selección automática de posición.

El peso es de aproximadamente 1,2 KB minificado. Una opción excelente cuando Microtip parece demasiado minimalista y no quiere incorporar Tippy.js.

Ventajas: atributos de datos para la posición, ayudante JS ligero, diseño agradable. Desventajas: sin tooltips interactivos, posicionamiento limitado a ocho direcciones.

Wenk está disponible en GitHub

13. Crumble

Crumble es una superposición sobre Grumble.js que añade un efecto de burbuja «desmoronándose» al cerrar. Concepto visualmente interesante, pero la doble dependencia (jQuery + Grumble.js) y la ausencia total de actualizaciones lo convierten exclusivamente en una pieza de museo histórica.

Incluimos Crumble en la colección para completitud y diversidad visual, pero para un proyecto real busque alternativas más vivas.

Ventajas: animación de cierre única, llama la atención. Desventajas: dos dependencias obsoletas, no apto para producción.

🔗 Grumble.js (dependencia)

14. Intro.js

Intro.js ya no es un tooltip, sino un marco completo para la incorporación de usuarios. Con la biblioteca usted crea instrucciones paso a paso: resaltado de elementos, ventana emergente con explicación, botones «Siguiente»/«Listo». Sin dependencias, JavaScript puro.

En nuestra prueba, Intro.js se mostró como la herramienta más madura para tours de producto: más de 23k estrellas en GitHub, código base en TypeScript, soporte para tours multipágina (con transferencia de estado entre páginas), personalización mediante clases CSS y callbacks para cada paso.

Ventajas: estándar de facto para tours de incorporación, desarrollo activo, documentación detallada. Desventajas: ~45 KB, justificado por la funcionalidad, pero excesivo para un simple tooltip.

🔗 Intro.js en GitHub🔗 Demostración en vivo

15. PowerTip

PowerTip de Steven Benner (autor de jQuery QueryBuilder) presenta un concepto interesante: un sistema de reglas garantiza que solo un tooltip esté visible en pantalla a la vez. Esto resuelve el clásico problema de cuando un usuario mueve rápidamente el cursor sobre varios elementos y obtiene un desorden de sugerencias superpuestas.

El plugin admite marcado complejo dentro del tooltip (incluyendo contenido AJAX), disparadores personalizados y posicionamiento en ocho direcciones. En proyectos jQuery, PowerTip es una de las opciones más fiables.

Ventajas: sistema de visualización inteligente, contenido HTML, funcionamiento estable. Desventajas: dependencia de jQuery, el repositorio recibe actualizaciones poco frecuentes.

🔗 PowerTip en GitHub

16. Toolbar.js

Toolbar.js de Paul Kinzett es un enfoque de «tooltip como barra de herramientas»: la ventana emergente contiene no solo texto, sino botones, iconos, enlaces. El escenario típico es que usted selecciona texto en una página y aparece un panel con botones de «Copiar», «Compartir», «Buscar».

El plugin usa Popper.js para el posicionamiento, lo que garantiza un comportamiento correcto en los bordes de la pantalla. El proyecto reunió más de 2.3k estrellas, pero no ha tenido actualizaciones importantes en los últimos años. Conceptualment, Toolbar.js influyó en muchos patrones de interfaz modernos (paneles de selección al estilo Medium).

Ventajas: enfoque único de «tooltip como panel de acciones», buen posicionamiento. Desventajas: proyecto congelado, vinculado a una versión antigua de Popper.js.

🔗 Toolbar.js en GitHub

17. Simptip

Simptip es una librería CSS de tooltips escrita en Sass usando mixins y variables. Esto la hace conveniente para proyectos donde la apariencia del tooltip debe coincidir exactamente con el sistema de diseño: cambie la variable $bg-color y todos los tooltips se recolorean.

La librería admite flechas suaves y afiladas, cuatro posiciones y efecto de aparición (desvanecimiento). El peso es mínimo: el CSS compilado ocupa unos 2 KB.

Ventajas: variables Sass para personalización, diseño cuidado, ligera. Desventajas: sin contenido HTML, proyecto no actualizado.

🔗 Simptip en GitHub

18. HubSpot Tooltip

HubSpot publicó como código abierto su librería interna de tooltips, está construida sobre Tether (motor de posicionamiento, predecesor de Popper.js) y Drop (librería para elementos desplegables). La combinación proporciona un sistema de tooltips potente y flexible con posicionamiento automático.

Actualmente HubSpot Tooltip tiene más interés histórico: la librería no se actualiza, Tether fue reemplazado oficialmente por Popper.js (y luego por Floating UI). No obstante, las decisiones arquitectónicas de HubSpot influyeron en las librerías modernas, el enfoque mismo de «motor de posicionamiento + motor de visualización» se convirtió en estándar.

Ventajas: calidad de código industrial, buen posicionamiento, soporte HTML. Desventajas: dependencias obsoletas (Tether), proyecto congelado.

🔗 HubSpot Tooltip en GitHub

19. Hopscotch

Hopscotch es el segundo framework, después de Intro.js, para crear tours de producto. El enfoque es distinto: en lugar de una cadena de elementos del DOM, usted describe el tour como un objeto JSON (pasos, objetivos, contenido) y la biblioteca gestiona el renderizado y la navegación por sí misma. Soporta tours multipágina: el usuario sigue un enlace y el tour continúa desde el mismo paso.

El proyecto pasó a estar bajo el ala de la organización broccolijs-archive y está congelado. Para un producto nuevo recomendamos Intro.js, pero si usted mantiene código legacy con Hopscotch, sigue funcionando y está documentado.

Ventajas: descripción del tour en JSON, soporte multipágina, API madura. Desventajas: proyecto archivado, sin nuevas funcionalidades.

Hopscotch en GitHub (proyecto archivado)

20. Darktooltip

Darktooltip es un plugin de jQuery con un diseño oscuro fijo, soporte para contenido HTML y animación de aparición. La API es simple: invoque .darktooltip() sobre un elemento, pase las opciones y listo. Adecuado para widgets pequeños y paneles de administración donde necesite un tooltip rápido y consistente sin complicarse con CSS.

En nuestra experiencia, Darktooltip es una herramienta de nicho: si el tema oscuro encaja con el diseño, funciona bien; si necesita personalización de colores, es más sencillo optar por Tooltipster o Tippy.js.

Ventajas: API simple, contenido HTML, animación agradable. Desventajas: solo tema oscuro, dependencia de jQuery, proyecto inactivo.

🔗 Darktooltip en GitHub

21. Tipso

Tipso cierra la colección como un agradable y ligero plugin de jQuery con animación CSS3. Diseño responsive desde el inicio (el tooltip cambia de tamaño en móviles), varios disparadores y posiciones, soporte HTML. Cabe destacar por separado que Tipso existe como un plugin para WordPress, lo cual puede ser conveniente para propietarios de sitios WordPress que no quieran meterse con el código.

La biblioteca no se actualiza desde hace varios años, pero la base de código es estable y no tiene errores críticos. Para proyectos jQuery simples, es una opción viable.

Ventajas: adaptabilidad, versión para WordPress, animación agradable. Desventajas: no se actualiza, ligada a jQuery.

🔗 Tipso en GitHub

Cómo probamos y cómo elegir su tooltip

Sometimos cada plugin a la misma lista de verificación: carga en una página vacía, renderizado en el borde de la pantalla, comportamiento ante cambios rápidos de hover, toque en móvil, personalización de color y fuente. Las puntuaciones en la tabla anterior no son «estrellas» abstractas, sino resultados directos de estas pruebas.

Para una selección rápida, conserve esta matriz de correspondencia:

• Landing page, blog, documentación → Microtip o Wenk. CSS puro, carga instantánea, nada superfluo.
• Panel de administración con jQuery, sitio WordPress → Tooltipster. Maduro, estable, con soporte táctil.
• Aplicación web moderna, React/Vue → Tippy.js. El mejor posicionamiento del mercado, TypeScript, desarrollo activo.
• Ventanas de diálogo + tooltips + notificaciones en un solo paquete → JBox. Estilo unificado para todos los popups.
• Tour de producto, onboarding, instrucciones paso a paso → Intro.js. Estándar de la industria, más de 23k estrellas, tours multipágina.

Regla general que derivamos de las pruebas: si tiene dudas, elija Tippy.js. Cubre la gran mayoría de los escenarios, no arrastra jQuery y resuelve el problema del posicionamiento de una vez por todas. Y si el proyecto ya está sobre jQuery y no hay presupuesto asignado para una migración, Tooltipster no le defraudará.

Video: cómo crear un tooltip atractivo con CSS puro

Para ver los tooltips en acción, mire este tutorial de AlgoKage: en 10 minutos construirá una elegante pista emergente sin una sola línea de JavaScript:

⁉️🤔 Preguntas frecuentes

¿Se necesita JavaScript para los tooltips?

No es obligatorio. Para un tooltip de texto simple en escritorio, CSS es suficiente (Microtip, Wenk, Simptip). Pero si necesita contenido HTML, posicionamiento automático en los bordes de la pantalla, disparo por clic o soporte móvil, no puede prescindir de JavaScript. Tippy.js y Tooltipster cubren estos escenarios.

¿Qué tan importante es la accesibilidad (a11y) en los tooltips?

Es crítica. Los usuarios de lectores de pantalla deben recibir el texto del tooltip sin pasar el cursor. El enfoque correcto: usar aria-describedby en el disparador y role="tooltip" en el propio tooltip. Tippy.js y Microtip lo soportan de forma nativa. Si usted escribe su propio tooltip, no ignore WAI-ARIA.

¿En qué es mejor Tippy.js que el viejo Tooltipster?

Tippy.js no depende de jQuery, está escrito en TypeScript, usa Floating UI para el posicionamiento (el tooltip siempre permanece dentro de la ventana gráfica) y soporta tree-shaking. Tooltipster es maduro y estable, pero la dependencia de jQuery en 2026 es indeseable para proyectos nuevos. Si ya tiene un stack jQuery, Tooltipster es una excelente elección; si empieza desde cero, Tippy.js.

¿Se pueden usar varias bibliotecas de tooltips en un mismo sitio?

Técnicamente sí, pero en la práctica esto crea conflictos de estilos, duplicación de código y confusión al depurar. La excepción es Microtip para iconos + Intro.js para tour de producto: sus áreas de responsabilidad no se solapan. En general, elija una biblioteca para el escenario principal.

¿Por qué los tooltips se cortan en el móvil?

Los dispositivos móviles no tienen hover y su ventana gráfica es estrecha. Los tooltips que se muestran a la derecha de un elemento en escritorio pueden salirse de la pantalla en móvil. Solución: o bien posición responsive (Tippy.js puede elegir automáticamente el lado), o bien sustituir el tooltip por un popover accionable por clic para móvil.

¿Debería usar Grumble.js o Crumble en un proyecto real?

No. Ambas bibliotecas no se actualizan desde hace más de 10 años y dependen de una versión obsoleta de jQuery. Visualmente son interesantes como concepto, pero para producción elija análogos modernos: Tippy.js con un tema personalizado puede imitar cualquier estilo visual sin dependencias obsoletas.

¿Qué plugin de tooltip elegir en 2026?

Veintiún plugins es mucho donde elegir, pero los verdaderamente universales entre ellos son tres: Microtip para pistas CSS ultraligeras, Tooltipster para proyectos jQuery y Tippy.js para todo lo demás. Intro.js queda aparte: no es un tooltip, sino un framework para onboarding, y en su nicho es el mejor.

Los dieciocho restantes son o bien herramientas de nicho para un diseño específico (Darktooltip, Simptip), o bien artefactos históricos que influyeron en la industria (Grumble.js, HubSpot Tooltip), o bien proyectos sólidos pero congelados que aún funcionan, aunque para código nuevo es mejor tomar algo vivo.

Si usted leyó hasta este punto, la colección cumplió su cometido: ahora sabe qué plugin elegir para su proyecto. Tómelo y pruébelo, todos los enlaces a la documentación y los repositorios están en la descripción de cada herramienta.