Resumen de IA
¿Quieres añadir tooltips a tu formulario? Los tooltips son pequeñas cajas que aparecen al pasar el ratón sobre un área de tu sitio de WordPress, y son geniales para añadir información adicional sobre un campo sin saturar el espacio.
En esta publicación, te mostraremos cómo añadir tooltips en WordPress.
En este artículo
- ¿Qué es un Tooltip en WordPress?
- Instalar un Tooltip en WordPress sin un plugin
- Paso 1. Crea un formulario de WordPress
- Paso 2. Instala el plugin Shortcodes Ultimate
- Paso 3: Obtén tu shortcode de Tooltip
- Paso 4: Añade tu Tooltip a tu formulario
- Paso 5: Personaliza tu Tooltip
- Paso 5: Convierte tu Tooltip en un icono (Opcional)
- Reflexiones finales
Crea tu formulario de WordPress ahora
¿Qué es un Tooltip en WordPress?
Los tooltips son pistas, términos de glosario o mensajes que aparecen cuando tu visitante pasa el ratón por encima o toca (en dispositivos móviles) un elemento de tu sitio web de WordPress. Y en tus formularios de WordPress, los tooltips se pueden usar para añadir información adicional sobre un campo en particular.
Por ejemplo, echa un vistazo a la captura de pantalla a continuación.
WPForms te permite añadir fácilmente una descripción para cada campo en el constructor de formularios. A diferencia de una descripción de campo típica, los tooltips están ocultos por defecto. Solo aparece cuando tu usuario quiere saber más detalles sobre un campo determinado al pasar el ratón por encima de la descripción del campo.
Añadir un tooltip es una gran idea si quieres proporcionar más detalles sobre un campo determinado sin crear distracciones innecesarias en tu formulario.
Ahora que sabes qué es un tooltip, sigue leyendo para descubrir cómo añadirlos a tu sitio.
Instalar un Tooltip en WordPress sin un plugin
Sí, es posible instalar un tooltip en WordPress sin un plugin. Sin embargo, si no quieres usar un plugin de tooltip para añadir fácilmente un tooltip a tu sitio de WordPress, necesitarás ser un usuario avanzado y usar html o jquery (o contratar a un desarrollador para que lo haga por ti).
Afortunadamente, puedes ahorrar tiempo y dinero usando un plugin de tooltip. Para los usuarios de WPForms, recomendamos el plugin gratuito Shortcodes Ultimate.
Shortcodes Ultimate es fácil de usar y funciona muy bien con los temas de WordPress más populares y mejores.
Este plugin de WordPress, muy útil y gratuito, te proporcionará más de 50 shortcodes para usar y añadir fácilmente diversas funciones a tu sitio, incluido el shortcode de tooltip. A continuación, te mostraremos exactamente cómo añadir este plugin de tooltips para WordPress.
Cómo añadir Tooltips en WordPress
Echemos un vistazo a la guía paso a paso sobre cómo añadir tooltips en WordPress.
Paso 1. Crea un formulario de WordPress
Lo primero que debes hacer es instalar y activar WPForms en tu sitio. Si necesitas ayuda, consulta esta guía sobre cómo instalar un plugin de WordPress.
Luego, necesitarás crear un formulario sencillo en WordPress.
Buen trabajo creando tu formulario. Volveremos a él en un paso posterior.
Paso 2. Instala el plugin Shortcodes Ultimate
A continuación, haz clic aquí para ir a WordPress y descargar el plugin gratuito Shortcodes Ultimate.
O si ya estás en tu panel de WordPress, haz clic en Plugins » Añadir nuevo, busca Shortcodes Ultimate y haz clic en Instalar ahora.
Una vez activado el plugin, estarás listo para empezar a usarlo.
Paso 3: Obtén tu shortcode de Tooltip
Ahora, busca el plugin Shortcodes Ultimate en el lado izquierdo de tu panel de WordPress y haz clic en Shortcodes disponibles. Desplázate por esa página y selecciona el botón Tooltip.
En la siguiente página, resalta y copia el shortcode:
Paso 4: Añade tu Tooltip a tu formulario
Ahora que tienes tu shortcode de tooltip, es hora de agregarlo a tu formulario de contacto simple.
Vuelve a tu formulario haciendo clic en WPForms » Todos los formularios y luego selecciona Editar en el formulario donde deseas agregar tu tooltip.
Una vez en el formulario, haz clic en el campo al que deseas agregar tu tooltip y pega tu shortcode de tooltip en el cuadro de descripción.
Una vez que guardes tu formulario y lo veas desde el frontend, ahora se mostrará el tooltip:
Paso 5: Personaliza tu Tooltip
También puedes modificar el código para mostrar tu propio texto. Aquí tienes un ejemplo con los cambios realizados en negrita:
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="This is the content area which will be shown in the Tooltip bubble after the user hovers over it!" behavior="hover" close="no" class=""]This is the text that will be always be displayed and will show the Tooltip content when hovered over![/su_tooltip]
También puedes cambiar un montón de opciones diferentes en la configuración de tu tooltip, que puedes encontrar desplazándote hasta el final de la página Shortcodes » Shortcodes disponibles, como:
- Estilo + Colores
- Posición
- Tamaño
- Comportamiento
- Y más
El siguiente paso es opcional, pero hará que tu tooltip se vea aún más personalizado y mantendrá tus formularios aún más limpios y sin distracciones.
Paso 5: Convierte tu Tooltip en un icono (Opcional)
A menos que indiques específicamente e invites a la gente a pasar el ratón sobre tu tooltip en tu shortcode de tooltip, ¡tus visitantes podrían ni siquiera darse cuenta de que hay contenido adicional esperando a ser mostrado en ese tooltip! Una excelente manera de asegurarte de que tus lectores pasen el ratón sobre el tooltip es convertirlo en un icono en lugar de usar solo texto.
Por ejemplo, muchas personas agregan un icono de información "i" y luego, cuando el usuario pasa el ratón sobre ese icono, se muestra el tooltip. ¿Qué tan elegante es eso?
Para hacer esto, primero, descarga y activa el plugin gratuito Better Font Awesome. Si te saltaste directamente a esta parte de la publicación, aquí tienes un enlace a cómo instalar un plugin de WordPress si lo necesitas.
Una vez activado el plugin, tendrás acceso a miles de iconos gratuitos que puedes usar en cualquier lugar de tu sitio de WordPress con un simple shortcode. Ahora, vamos a agregar el shortcode del icono de Información a nuestro tooltip.
Vamos a poner el shortcode de un plugin dentro del shortcode de otro plugin. ¡Pero no te preocupes, ambos seguirán funcionando!
Vuelve al cuadro de descripción de campos de tu formulario que contiene tu tooltip y simplemente reemplaza el texto mostrado dentro de tu shortcode de tooltip con este shortcode:
[icon name="info"]
El área de texto que debes reemplazar con el shortcode anterior se resalta a continuación:
Y así es como debería verse el código una vez que hayas agregado el shortcode del icono:
Alternativamente, puedes simplemente copiar y pegar el siguiente shortcode en tu cuadro de descripción y ajustarlo a tu gusto.
[su_tooltip style="yellow" position="top" shadow="no" rounded="no" size="default" title="" content="Tooltip text" behavior="hover" close="no" class=""][icon name="info"][/su_tooltip]
A continuación, guarda tu formulario y compruébalo en el frontend para ver el icono de tu tooltip.
¡Buen trabajo! Ahora, si deseas ser aún más avanzado y colocar el icono del tooltip encima del campo junto a la etiqueta, consulta nuestro tutorial detallado sobre cómo agregar iconos a formularios de WordPress.
Reflexiones finales
¡Eso es todo! Ahora sabes cómo agregar tooltips en WordPress.
Si deseas cambiar la apariencia de los botones de tus formularios, lee cómo personalizar estilos de botones con CSS. O si lo prefieres, consulta nuestra guía sobre cómo estilizar WPForms con CSS Hero (sin necesidad de codificación).
¿A qué esperas? Empieza hoy mismo con el mejor plugin de formularios de WordPress.
Si te ha gustado este artículo, síguenos en Facebook y Twitter para más tutoriales gratuitos de WordPress.
¿Es posible añadir varios Tooltips con mensajes diferentes?
Gracias
¡Hola!
Claro, puedes crear diferentes tooltips para diferentes campos, sin embargo, un campo solo puede tener un tooltip, ya que una vez que pases el ratón por encima, solo se podrá mostrar un tooltip para él.
Espero que tenga sentido.
¡Que tengas un buen día! 🙂
¿Cómo se puede añadir un tooltip a un icono o imagen en WordPress?
¡Hola Joshu!
Simplemente puedes envolver una etiqueta HTML de imagen o icono con el shortcode Tooltip según las instrucciones proporcionadas en este tutorial.
Espero que esto ayude.
¡Que tengas un buen día! 🙂
Hola, gracias por el consejo.
Creo que el formulario se vería más ordenado si el icono de la información estuviera posicionado al lado de la etiqueta del campo en lugar de abajo del todo de cada campo, tal como lo tienes en la sección de configuración de tu formulario con la información del icono de signo de interrogación. Si lo has hecho de esa manera, supongo que también estás de acuerdo en que es mejor. ¿Cómo logramos un efecto similar?
¡Hola Chris!
Puedes intentar poner el shortcode Tooltip en el campo Etiqueta. Yo no lo he probado personalmente, pero puedes intentarlo.
¡Espero que esto ayude!
¡Que tengas un buen día! 🙂
Funciona, pero luego todo el código y la descripción del tooltip aparecen en tu correo electrónico y puede ser difícil de leer.
Hola Gareth.
En este caso, puedes intentar usar las Smart Tags de los campos en la configuración de Notificación en lugar de la de {all_fields}.
Y por si ayuda, tenemos un excelente tutorial sobre cómo usar Smart Tags en el correo de notificación.
Cuando usas Smart Tags, no se añadirá automáticamente la etiqueta del campo, sino solo su valor, por lo que tendrás que añadir las etiquetas manualmente.
Espero que esto ayude.
¡Que tengas un buen día! 🙂
Hola, quiero añadir un icono de tooltip después de la etiqueta, pero cuando pongo el [tooltip shortcode] en esta sección, solo lo reconoce como texto plano. ¿Hay alguna solución?
Hola Sina, actualmente el campo de etiqueta no admite shortcodes, solo el campo de descripción admite shortcodes. Si lo necesitas en el campo de etiqueta, nuestro equipo de soporte podría ayudarte con algo de código personalizado. Si eres un usuario con licencia de pago, puedes crear un ticket de soporte aquí.
Que tengas un buen día :)
Hola…
¿Podría usar esto para los títulos de las columnas en WooCommerce?
Gracias.
Hola Octavio – Me disculpo, pero no admitimos ninguna integración con WooCommerce, principalmente porque están fuertemente integrados con sus propios sistemas de formularios.
Si necesitas que los formularios funcionen dentro de WooCommerce, te sugiero que te pongas en contacto directamente con el equipo de Woo para asegurarte de que puedes encontrar una opción que se integre correctamente con su sistema.
Gracias 🙂
Hola,
Estoy intentando añadir los tooltips a mi sitio pero no funciona. Shortcodes Ultimate no tiene shortcodes disponibles a menos que busque en su documentación. ¿Podría ser esa la causa?
Hola, ¿puedo cambiar el color y el tamaño del tooltip del icono? ¿Qué código necesitaría para esto?
Hola Emma,
¡Buena pregunta! Por favor, consulta esta guía de Shortcode Ultimate para formatear el texto.
¡Espero que esto ayude! 🙂
¿Cómo puedo hacer que aparezca un tooltip si el usuario no ha rellenado un campo? Sé que ya existe ese mensaje, pero es bastante pequeño y mucha gente se confunde al rellenar el formulario. Idealmente, me gustaría que parpadeara de alguna manera.
Hola Myur – Aunque actualmente no tenemos la opción de mostrar el mensaje en el tooltip, si lo prefieres, puedes aumentar el tamaño de la fuente del mensaje de validación usando el siguiente CSS:
div.wpforms-container-full .wpforms-form em.wpforms-error { font-size: 16px !important; /* Por favor, cambie los valores según su preferencia */ }Por si te sirve de ayuda, puedes consultar nuestra documentación aquí para añadir CSS personalizado.
También puedes mostrar un mensaje de campo obligatorio en el placeholder, como se muestra en esta captura de pantalla.