Cómo añadir un tooltip a una web en WordPress sin programador
Una pista contextual en WordPress: 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 de WordPress
Ejemplo: un tooltip en WordPress
Una tienda WooCommerce vende plantillas digitales y los clientes no encuentran sus archivos. En /my-account un tooltip señala la pestaña Downloads: “Tus archivos están aquí; los enlaces no caducan”.
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 WordPress, 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
Instala un plugin de código para la cabecera
En Plugins → Add New instala y activa el plugin gratuito WPCode (o usa la opción de “scripts en la cabecera” de tu tema). No edites
header.php: las actualizaciones del tema lo sobrescriben.
Paso 2 · ilustración esquemática - Paso 03
Pega la línea en el cuadro Header
Abre Code Snippets → Header & Footer, pega la línea de Clew en Header y pulsa Save Changes.
Paso 3 · ilustración esquemática - Paso 04
Vacía la caché
Si usas WP Rocket, LiteSpeed Cache, W3 Total Cache o una CDN, vacía la caché. En los ajustes de “retrasar JavaScript”, excluye
tryclew.io/widget.
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) Sección por prefijo /my-accountCuá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 WordPress
“Retrasar JavaScript” oculta el tooltip hasta la interacción
WP Rocket, LiteSpeed y Perfmatters pueden aplazar los scripts hasta el primer scroll o clic. El widget arranca tarde y un elemento Al cargar la página parece roto. Añade tryclew.io/widget a las exclusiones.
Las actualizaciones de tema y plugins renombran pestañas y botones
WooCommerce y los temas cambian a veces el marcado de las pestañas de la cuenta y de los formularios de producto. Ancla la pista a un elemento con una clase estable como woocommerce-MyAccount-navigation-link--downloads en vez de a su posición, y echa un vistazo a Estado tras actualizar plugins.
Mejor id y atributos data
Si Elegir elemento propone una cadena larga de clases, elige el padre más cercano con id o pide un atributo data-tour: un selector estable mantiene la pista viva tras las actualizaciones del tema.
Preguntas y respuestas
¿Funciona con constructores como Elementor?
Sí. Clew trabaja sobre la página ya renderizada; elige el elemento con Elegir elemento, lo haya creado quien lo haya creado.
¿Funciona en WordPress.com?
Plugins como WPCode necesitan el plan Business de WordPress.com o superior. WordPress autoalojado funciona en cualquier hosting.
¿Se verá en wp-admin?
Los plugins de cabecera suelen añadir el código solo al sitio público. Para guías dentro de /wp-admin, añade la línea con un snippet para el área de administración (WPCode permite elegirla).
¿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.
Qué más puedes añadir en WordPress
- Cómo añadir un popup a una web en WordPress sin programador
- Cómo crear un tour de producto en WordPress sin programador
- Cómo crear una guía interactiva de producto en WordPress sin programador