Cómo añadir un tooltip a una web en Webflow sin programador
Una pista contextual en Webflow: una frase junto al elemento donde dudan los visitantes, colocada con un clic en el editor visual y mostrada justo cuando ayuda.
- Tiempo
- ● 10 minutos
- Precio
- Plan Free
- Quién lo hace
- Administrador del sitio en Webflow
Ejemplo: un tooltip en Webflow
En una página de precios de Webflow los visitantes no ven que el pago anual ahorra dos meses. Un tooltip en el selector mensual/anual dice “Anual = 2 meses gratis” a quien abre /pricing, una vez.
Gratis en el plan Free de Clew, sin tarjeta y sin límite de tiempo: un sitio y hasta 3 tours o tooltips publicados. Las reglas de audiencia y los tests A/B llegan con Pro.
Cómo añadir el tooltip en Webflow, paso a paso
- Paso 01
Copia tu snippet de Clew
Crea una cuenta gratis (o inicia sesión), añade tu sitio y abre Admin → Resumen. Haz clic en la línea de la tarjeta del widget para copiarla: ya lleva la clave real de tu sitio en lugar del marcador.
<!-- Clew: sustituye PEGA_AQUI_TU_CLAVE por la clave del sitio de Admin > Resumen --> <script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>
Paso 1 · ilustración esquemática - Paso 02
Abre Site settings → Custom code
En el panel de Webflow abre los Site settings del sitio y la pestaña Custom code. El código personalizado requiere un Site plan de pago.
Paso 2 · ilustración esquemática - Paso 03
Pega en Head code
Pega la línea de Clew en Head code y pulsa Save changes.
Paso 3 · ilustración esquemática - Paso 04
Publica el sitio
El código personalizado llega al sitio real solo tras Publish, a tu dominio propio y a
webflow.iosi usas ambos.
Paso 4 · ilustración esquemática - Paso 05
Pega el tooltip al elemento
En Clew abre Flujos → + Nuevo flujo, deja Tooltips paso a paso y pulsa Editar en tu sitio. En tu página pulsa Elegir elemento, haz clic en el campo o botón y escribe un título corto y una frase. Ajusta Posición si la posición automática tapa algo importante.
Paso 5 · ilustración esquemática - Paso 06
Elige dónde, cuándo y a quién se muestra
En el mismo editor, completa Dónde mostrarlo (URL de la página), Cuándo mostrarlo, Segmentación de audiencia y Frecuencia. Estos son los ajustes del ejemplo de arriba:
Ajuste Valor Formato Tooltips paso a paso Dónde mostrarlo (URL de la página) Ruta exacta /pricingCuándo mostrarlo Al cargar la página Segmentación de audiencia Sin reglas: todos los que abren la página Frecuencia Una vez por visitante 
Paso 6 · ilustración esquemática - Paso 07
Publica y compruébalo en el sitio real
Pon Estado en Publicado y guarda. Abre la página en una ventana privada: Clew recuerda quién ya vio un elemento de “una vez”, así que tu navegador habitual puede saltárselo. Las vistas, finalizaciones y abandonos aparecen en las estadísticas.
Paso 7 · ilustración esquemática
Errores comunes: tooltip en Webflow
El dominio de staging cuenta como otra URL
Las reglas de URL comparan rutas, así que un tooltip configurado para /pricing aparece tanto en tusitio.webflow.io como en tu dominio. Es útil para probar antes de publicar en el dominio.
Las combo classes se repiten entre elementos
Clases de Webflow como .button.is-secondary se repiten por la página. Dale al elemento un atributo personalizado data-tour en los ajustes del elemento y apunta el tooltip ahí.
El constructor puede regenerar elementos al publicar
Los constructores a veces cambian los id de los elementos al duplicar o recrear un bloque. Tras cambios grandes de diseño, abre Estado: si la pista perdió su elemento, vuelve a elegirlo.
Preguntas y respuestas
¿El tooltip se mueve en los breakpoints de móvil?
Sí. Se coloca respecto al elemento en el momento de mostrarse, sea cual sea el diseño del breakpoint.
¿Necesito un plan de pago de Webflow?
Sí. Webflow solo permite código personalizado en todo el sitio con Site plans de pago, y no hay alternativa soportada.
¿El tooltip es gratis?
Sí, en el plan Free: hasta 3 tours y tooltips publicados en un sitio.
¿Puede abrirse solo al hacer clic?
Sí. Elige Al hacer clic en un elemento, indica el selector del icono o enlace que lo abre y pon En cada visita.