Cómo añadir tooltips con estilo a Webflow sin usar jQuery

<!-- Popper.js (required by Tippy.js for positioning) -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>

<!-- Tippy.js v6 -->
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />

div, un <span>span, un elemento de texto de Webflow), configura también el cursor como "Pointer" en el panel de estilos. Sin esto, iOS Safari no reconocerá el toque y el tooltip no se activará en dispositivos táctiles.

El elemento ya está marcado. El tooltip aún no aparecerá; eso requiere la llamada de inicialización del paso 3.

3. Inicializa Tippy.js en el código personalizado del pie de página

Añade la llamada de inicialización después de las etiquetas de script de Tippy.js.

En Configuración del sitio → Código personalizado → Código del pie de página, después de las dos etiquetas de script del paso 1, añade:

<script>
  tippy('[data-tippy-content]');
</script>

Esta única llamada selecciona todos los elementos de la página con un atributo data-tippy-content y activa una instancia de Tippy.js en cada uno. Tippy.js lee automáticamente el valor del atributo como el contenido del tooltip.

Personalización del comportamiento

Para personalizar el comportamiento (posición, animación, retraso), pasa un objeto de opciones:

<script>
  tippy('[data-tippy-content]', {
    placement: 'bottom',   // 'top', 'bottom', 'left', 'right', or auto variants
    animation: 'scale',    // 'fade' (default), 'scale', 'shift-away', 'shift-toward', 'perspective'
    delay: [100, 200],     // [show delay in ms, hide delay in ms]
    arrow: true            // show the arrow pointer (default: true)
  });
</script>

Las opciones se aplican globalmente a todos los tooltips de la página.

Si usas una animación distinta a 'fade', carga el CSS correspondiente en Configuración del sitio → Código personalizado → Código del encabezado:

<!-- Required for 'scale' animation -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css" />

Reemplaza scale por shift-away'scale'shift-toward, perspective,'shift-away'\fade o 'perspective' según la animación que utilices. Sin este CSS, el ajuste de animación se ignorará silenciosamente y se usará la animación 'fade' por defecto.

Uso de diferentes ajustes por elemento

Si necesitas configuraciones distintas por elemento, por ejemplo placement: 'right' en un elemento y placement: 'top' en otro, inicializa cada conjunto por separado con un selector más específico, o usa las propiedades data-tippy-* de Tippy.js para sobrescribir cada elemento:

<script>
  // Global defaults
  tippy('[data-tippy-content]', {
    placement: 'top',
    animation: 'fade'
  });
</script>

data-tippy-placement="right"  ← set this as a custom attribute on specific elements to override

La lista completa de opciones disponibles se encuentra en la referencia de propiedades de Tippy.js.

Guarda y tu sitio estará listo para publicarse. Tippy.js se activará en todos los elementos con data-tippy-content al cargar la página.

4. Publica y prueba en el sitio en vivo

Haz clic en Publicar en la parte superior derecha del Diseñador. Selecciona tu dominio y publica.

Una vez que termine la publicación, abre la URL de tu sitio en vivo. El código personalizado no se ejecuta en el lienzo del Diseñador de Webflow. En el modo de vista previa, el código personalizado está desactivado de forma predeterminada. Puedes habilitarlo haciendo clic en el interruptor "Habilitar código personalizado" en la parte inferior izquierda de la ventana de vista previa.

Pasa el cursor sobre cualquier elemento al que hayas añadido data-tippy-content en el paso 2.

Deberías ver lo siguiente:

• Aparece una burbuja de información sobre el elemento (o en la placement que hayas configurado)
• Se reproduce una animación de desvanecimiento (o la animation que hayas configurado)
• La información sobre herramientas desaparece cuando alejas el cursor

En dispositivos móviles, la información sobre herramientas se activa al tocar. El elemento debe tener cursor: pointer en su CSS para que esto funcione en iOS Safari. Si al tocar no sucede nada, la sección de solución de problemas a continuación te indica cómo arreglarlo.

5. Renderiza contenido HTML dentro de las informaciones sobre herramientas (opcional)

De forma predeterminada, Tippy.js trata el valor de data-tippy-content como texto sin formato.

Para renderizar HTML dentro de una información sobre herramientas (contenido con formato, iconos, enlaces), habilita allowHTML:

<script>
  tippy('[data-tippy-content]', {
    allowHTML: true
  });
</script>

Luego, establece el valor del atributo personalizado como una cadena HTML:

data-tippy-content  →  <strong>Required field</strong> — must be a valid email address

Ten en cuenta un par de cosas. allowHTML: true solo es relevante si el navegador necesita analizar etiquetas dentro de la cadena de contenido. Para la mayoría de los casos de uso (etiquetas simples, descripciones breves), no lo necesitas. Si lo usas, asegúrate de que el contenido sea seguro. No pases cadenas generadas por usuarios sin sanear directamente a las informaciones sobre herramientas de allowHTML: true .

Para contenido complejo que vaya más allá de una cadena breve (una tarjeta con una imagen, una definición con formato), puedes hacer referencia a un elemento DOM fuera de pantalla en lugar de una cadena en línea.

¿Qué hace que las informaciones sobre herramientas de Tippy.js fallen en Webflow?

La mayoría de los fallos se deben a cuatro motivos: probar en el entorno incorrecto, un error tipográfico en el atributo, el problema de toque en iOS o un conflicto de contención CSS.

Aquí te explicamos cómo identificar y solucionar cada uno.

Los tooltips no aparecen en ninguna parte de la página

Has publicado el sitio y has pasado el cursor sobre los elementos, pero no ocurre nada.

Comprobación 1: ¿Estás probando en el sitio publicado? El código personalizado no se ejecuta en el lienzo del Diseñador de Webflow. Si estás viendo el lienzo o una URL de vista previa compartida, Tippy.js no se ejecutará. Abre tu dominio publicado o .webflow.io subdominio.

Comprobación 2: ¿El script de inicialización se carga después de la librería? La tippy(...) llamada debe ejecutarse después de las etiquetas de script de Popper.js y Tippy.js. Los tres bloques deben estar en la sección de código del pie de página (Footer), en este orden: primero Popper, segundo Tippy y tercero tu script de inicialización. Si el script de inicialización está en la sección de código del encabezado (Head), Tippy.js aún no existe cuando se ejecuta.

Comprobación 3: Abre la consola del navegador. Haz clic derecho en la página publicada → Inspeccionar → Consola. Si ves tippy is not defined o un error 404 en las URLs de la CDN, uno de los scripts no se cargó. Revisa Configuración del sitio → Código personalizado para confirmar que las etiquetas de script están en el pie de página y que las URLs son correctas.

Algunos elementos tienen tooltips y otros no

La mayoría de los elementos responden, pero unos pocos no hacen nada, a pesar de tener data-tippy-content configurado.

Causa: El nombre del atributo tiene un error tipográfico. Tippy.js selecciona elementos usando '[data-tippy-content]' exactamente. Si falta un solo carácter, el elemento es invisible para el selector.

En el Diseñador de Webflow, abre la Configuración del elemento (Element Settings) en el elemento afectado y verifica que el nombre del atributo personalizado sea data-tippy-content, todo en minúsculas, con guiones y no guiones bajos.

Algo que suele confundir: si el valor está vacío (data-tippy-content sin valor definido), Tippy.js aún se inicializa en el elemento pero muestra un tooltip en blanco. Asegúrate de que cada elemento tenga un valor que no esté vacío.

Los tooltips no se activan en iOS al tocar el elemento

Los tooltips al pasar el cursor funcionan en escritorio. Tocar el mismo elemento en un iPhone o iPad en Safari no hace nada.

Causa: iOS Safari no dispara eventos de toque o clic en elementos que no son interactivos de forma nativa (enlaces, botones, campos de entrada) a menos que el elemento tenga cursor: pointer configurado en CSS. Este es un comportamiento conocido de Safari desde hace mucho tiempo, no una limitación de Tippy.js.

Dado que Tippy.js usa el evento focus para el toque, y focus no se dispara en elementos no interactivos sin esta propiedad CSS, el tooltip nunca se activa.

Solución: Selecciona el elemento activador en el Diseñador de Webflow. En el panel de Estilo, busca la propiedad Cursor en Miscelánea (o escribe "cursor" en la barra de búsqueda) y establécela en Pointer. Publica y prueba en iOS.

Este es el problema móvil más reportado para interacciones de JavaScript personalizadas en elementos no interactivos en Webflow. Cambiar el cursor es una solución de un solo clic.

El tooltip aparece pero está recortado o escondido detrás de otro elemento

El tooltip se activa, pero una parte queda cortada por un contenedor o escondida detrás de un encabezado fijo.

Causa 1: overflow: hidden en un contenedor padre. Tippy.js añade los tooltips a document.body por defecto, lo que debería evitar la mayoría de los recortes. Si el recorte persiste, es probable que se deba a un padre con overflow: hidden o overflow: clip . Revisa los elementos padres en el panel de Estilo.

Causa 2: conflicto de z-index. Tippy.js usa por defecto z-index: 9999. Si un encabezado fijo o una capa modal tiene un z-index mayor, el tooltip se renderizará detrás. Sobrescribe el z-index de Tippy.js en las opciones:

<script>
  tippy('[data-tippy-content]', {
    zIndex: 100000
  });
</script>

Configúralo con un valor superior al de cualquier elemento que cubra el tooltip.