¿Cómo vincular o asociar un tooltip de WordPress a un elemento dado — WordPress Tooltips

Plugin de Tooltip de WordPress

Usuarios del plugin de WordPress Tooltip , espero que este mensaje los encuentre bien y disfrutando de un día feliz con sus familias Hemos recibido un ticket de soporte de un usuario del plugin de tooltip de WordPress, en el cual el usuario del tooltip dijo:

Perdón, soy nuevo aquí. Aún no puedo averiguar cómo vincular o asociar un tooltip a un elemento determinado. Entonces, creé un tooltip y digamos que quiero que aparezca cuando el usuario pase el mouse sobre un elemento de botón (con la etiqueta “Agregar persona” y el id=”add-person”) en mi página. ¿Cómo hago esto? Es decir, ¿cómo asocio el tooltip que acabo de crear con este elemento de botón?

Creemos que un mayor número de usuarios podría tener una duda similar. Por lo tanto, planeamos distribuir nuestra respuesta abiertamente a todos los usuarios del Tooltip de WordPress.

¿Cuál es el propósito de los tooltips?

Los tooltips son pequeñas cajas emergentes que proporcionan información adicional, como videos, audios, imágenes, Google Maps, códigos QR, artículos de Wikipedia y texto. Cuando los usuarios pasan el mouse sobre un elemento en sus páginas web, como una palabra en una publicación, un campo de formulario de búsqueda, una imagen o un widget de barra lateral, los tooltips aparecen sin problemas para ofrecer detalles atractivos. El plugin WordPress Tooltip otorga la capacidad de aplicar efectos de tooltip a cualquier elemento dentro de publicaciones de WordPress, menús, comentarios, formularios de contacto, productos de WooCommerce, foros de bbPress, actividades de BuddyPress y más. Este plugin cuenta con una variedad de componentes y complementos atractivos, incluyendo la característica encantadora Bullets Screen.

Presentando el Plugin de Tooltip de WordPress

WordPress Tooltip Pro es un plugin diseñado específicamente para mejorar su sitio web de WordPress con tooltips visualmente atractivos y versátiles. Le permite crear estilos de tooltip cautivadores que presentan contenido de manera hermosa para sus usuarios, todo mientras optimiza el espacio en la pantalla.

Cuando un usuario pasa el mouse sobre un elemento, se muestra una caja emergente de tooltip vibrante y animada. Tiene la flexibilidad de incorporar diversas formas de contenido, incluyendo videos, audios, imágenes e incluso contenido generado por terceros de plugins como códigos QR, anuncios de Amazon y Google Maps. Todo esto se puede agregar fácilmente a través del editor estándar de WordPress, lo que lo hace increíblemente fácil de usar.

Comprar ahora

Purchase Now

Como principiante, aprenda el proceso de creación de sus primeros tooltips usando el Plugin WordPress Tooltips Pro.

• WordPress Tooltip facilita la creación de tooltips de manera sencilla. Lo guiaremos a través del proceso de agregar tooltips paso a paso.
• Inicie sesión en su cuenta en el sitio web del Plugin WordPress Tooltip.
• Si aún no ha instalado el Plugin WordPress Tooltip, inicie sesión en su cuenta en el sitio web del Plugin Glossario de Tooltip de WordPress. Si ya ha instalado el Plugin WordPress Tooltip, puede proceder directamente al paso #10.
• Busque el enlace “Descargar” en la barra de menú superior o simplemente haga clic en este enlace: [enlace al Plugin Glossario de Tooltip de WordPress] para descargar el Plugin WordPress Tooltips Pro.
• Acceda al área de administración de su sitio de WordPress e inicie sesión.
• Vaya al menú de “Plugins”.
• Desactive la versión anterior del plugin de tooltips.
• Elimine el antiguo Plugin WordPress Tooltip.
• En el menú de “Plugins”, haga clic en “Añadir Nuevo” en la parte superior del panel de plugins.
• Cargue el archivo zip del plugin de tooltips que descargó del sitio web del Plugin Glossario de WordPress.
• Active la versión más reciente del Plugin WordPress Tooltip Pro.
• Vaya a la barra lateral administrativa de WordPress. Haga clic en “Tooltips” y luego en “Añadir Nuevo” para iniciar la adición de un nuevo tooltip de WordPress.
  
• Dentro del editor de texto de la publicación de WordPress, tiene la libertad de incorporar varios elementos HTML en el tooltip. Estos elementos pueden incluir imágenes, enlaces y texto.
• ¡Felicidades! Ahora ha incluido exitosamente un tooltip de WordPress. Cuando pase el mouse sobre la palabra clave designada, el tooltip se activará. Además, nuestro plugin de tooltip de WordPress ofrece una gran cantidad de opciones de personalización para mejorar la apariencia de sus tooltips. Estas opciones incluyen parámetros como el color del texto, el fondo, el tamaño de la fuente, el ancho, las sombras, la opacidad, el método de activación y más.
• Tutorial en video:

¿Cómo vincular o asociar un tooltip de WordPress a un elemento determinado?

1. Por favor, cree un nuevo término de tooltip de WordPress, en el panel de WordPress, puede hacer clic en el ítem de submenú “Añadir Nuevo” para abrir el Creador de Tooltips. La interfaz será similar al editor de tooltips mostrado abajo:

   

2. En el diagrama de arriba, notará un cuadro de metadatos titulado “Tooltips para Formularios”. Sin embargo, debería estar titulado “Tooltips para Clases”. Hicimos este cambio porque observamos que los casos de uso más comunes implicaban agregar tooltips a los elementos de los formularios o campos usando clases CSS o IDs. Este cambio tiene como objetivo ayudar a los usuarios a entender el propósito del cuadro de metadatos como tooltips para formularios.

3. Simplemente ingrese la clase CSS o el ID CSS en la caja de entrada “Tooltip para Formularios” donde desea aplicar el efecto del tooltip:

Por ejemplo, tooltips para clase:
.input_box_1
o tooltips para ID:
#text_box_2

Si no sabe cómo encontrar la clase CSS o el ID CSS para un componente específico en WordPress, consulte la guía titulada “¿Cómo encontrar una clase CSS o un ID CSS de un componente en una página de WordPress?”

1. Asegúrese de haber ingresado el título y el contenido del tooltip en el editor de tooltips, luego haga clic en el botón “Publicar”.

2. En el frontend, cuando visite una página que contenga la clase CSS o el ID CSS especificado, pasar el mouse sobre el elemento de la clase activará la visualización del contenido del tooltip en una ventana emergente de tooltip.

3. Aquí para revisar tooltips para clase DEMO, puede ver una demostración de los tooltips de WordPress para clases. En el formulario, al pasar el mouse sobre cada campo, aparecerá una ventana de tooltip dedicada. De esta manera, puede agregar tooltips para varias clases o IDs CSS en el frontend. Por ejemplo, puede tener tooltips para formularios de contacto, imágenes, videos, botones, elementos de menú, mapas, texto y más.

4. Tenga en cuenta que dentro del editor de tooltips, puede personalizar estilos de tooltip únicos y visualmente atractivos para cada término de tooltip. Además, puede aplicar diferentes animaciones para tooltips individuales.

Conclusión:

Los usuarios de tooltips de WordPress pueden agregar tooltips a elementos específicos dentro de su sitio WordPress, como campos de formulario, etiquetas de formulario, elementos de menú, botones o cualquier otro elemento interactivo. Al vincular o asociar tooltips con estos elementos, pueden proporcionar información adicional, instrucciones o aclaraciones a los usuarios al interactuar con esos elementos. Por ejemplo:

• En un campo de formulario, un tooltip puede ofrecer orientación sobre el formato esperado o proporcionar una breve descripción de la entrada requerida.
• En una etiqueta de formulario, un tooltip puede ofrecer más explicación o ejemplos sobre el propósito de la etiqueta.
• En un ítem de menú, un tooltip puede ofrecer una breve descripción o indicar la funcionalidad del ítem al pasar el mouse. La solicitud de función del usuario tiene como objetivo mejorar la experiencia del usuario al reducir la ambigüedad, proporcionar sugerencias útiles o brindar más información sobre elementos específicos. Esto puede llevar a una mejor usabilidad y comprensión de las funciones del sitio web o los requisitos de entrada.
• …etc

La característica “Tooltips para cualquier cosa” — puede mejorar la experiencia del usuario al reducir la ambigüedad, proporcionando sugerencias útiles o brindando más información sobre elementos específicos. Esto puede llevar a una mejor usabilidad y comprensión de las funciones del sitio web o los requisitos de entrada.