Algunos detalles no merecen un párrafo completo en la página. Una breve nota que aparece en el hover hace el trabajo, como contexto adicional en una tarjeta de características o una etiqueta en un botón de solo ícono. Elementor no tiene una forma incorporada de hacerlo, por lo que Información sobre herramientas extensión en Complementos maestros para Elementor agrega uno a la pestaña Avanzado de cada elemento.
Escribe el texto de la información sobre herramientas, elige dónde aparece y cómo se anima, luego lo diseña como cualquier otra parte de tu diseño. Sin código corto ni CSS.
Qué hace la extensión Tooltip #
Una vez habilitado, cada elemento Elementor obtiene un Información sobre herramientas sección bajo el Avanzado pestaña. Actívelo para un elemento, escriba el texto y los visitantes verán una pequeña burbuja cuando se ciernen sobre ese elemento en la página en vivo. Cada elemento lleva su propia información sobre herramientas, por lo que tres cartas seguidas pueden explicarse con texto diferente.
La extensión se divide en dos subpestañas: Ajustes para comportamiento (texto, ubicación, animación, disparador, sincronización) y Estilo para looks (colores, ancho, acolchado, tipografía).
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Tooltips es una extensión gratuita, por lo que no se requiere licencia Pro.
Cómo habilitar la extensión Tooltip #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. Información sobre herramientas se encuentra en el Widgets dinámicos grupo con insignia Popular, al lado Etiquetas dinámicas y enlace envolvente. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios en la parte superior, espere el aviso verde “Configuración guardada correctamente”.
Agregue una información sobre herramientas a un elemento #
Abra su página con Elementor y seleccione el elemento. En el ejemplo del vídeo, es una tarjeta Info Box en una fila de funciones de tres columnas. Ir al Avanzado pestaña, abre el Información sobre herramientas sección con la insignia MA morada y voltea el Información sobre herramientas cambie a Sí. La subpestaña Configuración se abre primero.
Configuración explicada #
- Contenido: el texto de información sobre herramientas. Escríbalo o utilice el enlace Escribir con IA si desea un punto de partida.
- Colocación: qué lado del elemento prefiere la burbuja: superior (el predeterminado), inferior, izquierdo o derecho.
- Sigue al cursor: hace que la información sobre herramientas siga al mouse en lugar de quedarse quieto.
- Animación: cómo entra la burbuja. Siete opciones: Ninguna, Desvanecimiento, Cambio hacia adelante, Escala, Perspectiva y Efecto de relleno.
- Activador: lo que abre la información sobre herramientas, flota de forma predeterminada.
- Duración y Retraso: la velocidad de animación en milisegundos y cuánto tiempo persiste la burbuja antes de cerrarse.
- Compensación X e Y: aleja la burbuja de su lugar predeterminado.
- Flecha y tipo de flecha: agregue el pequeño puntero que conecta la burbuja al elemento, nítido o redondo.
Estilee la información sobre herramientas #
Cambiar al Estilo subpestaña para que la burbuja coincida con su diseño en lugar de parecer un navegador predeterminado.
- Ancho máximo: limita el ancho de la burbuja, 200 px en la demostración, por lo que el texto largo se envuelve en lugar de extenderse por la pantalla.
- Texto, fondo y color de flecha: control total de color, incluido el puntero.
- Relleno, tipo de borde y radio de borde: la forma de la burbuja.
- Alineación de texto, sombras de caja y tipografía: termina el look con tu propia fuente y profundidad.
El resultado en la página #
Guarde y vea la página. Pase el cursor sobre la tarjeta y la información sobre herramientas se desvanece con el texto que escribió, utilizando la animación, los colores y el ancho que estableció. Aleje el cursor y se cerrará después del retraso.
Repita para los demás elementos de la página. En la demostración, cada una de las tres tarjetas de funciones obtiene su propio texto de información sobre herramientas, escrito una vez en el panel y servido en cada vuelo estacionario.
Donde la información sobre herramientas se gana #
- Tarjetas destacadas. Una frase de detalle extra sin alargar la carta.
- Tablas de precios. Explique qué cubre realmente el “apoyo prioritario”, justo donde la gente se pregunta.
- Botones e iconos. Etiquete controles solo con íconos para que nadie adivine.
- Miembros del equipo. Un dato divertido o una nota de rol sobre cada foto.
- Términos técnicos. Definiciones breves sobre jerga, más económicas que una página de glosario.
Vídeotutorial #
¿prefieres verlo en vivo? Este video recorre habilitando la extensión, escribiendo la información sobre herramientas y diseñando la burbuja.
Preguntas frecuentes #
¿cómo agrego información sobre herramientas en Elementor?
Habilite la extensión Información sobre herramientas en la pestaña Extensiones de complementos maestros, luego seleccione cualquier elemento en el editor Elementor, abra la pestaña Avanzado y active el interruptor Información sobre herramientas. Escriba su texto en el cuadro Contenido, elija una ubicación y animación, y la información sobre herramientas se mostrará al pasar el cursor.
¿puedo agregar información sobre herramientas a cualquier widget de Elementor?
Sí. La sección Información sobre herramientas aparece en la pestaña Avanzado de cada elemento: widgets, columnas, contenedores y secciones. Cada elemento mantiene su propio texto y configuración de información sobre herramientas, por lo que diferentes tarjetas en la misma página pueden decir cosas diferentes.
¿puedo diseñar la información sobre herramientas para que coincida con mi sitio?
Sí. La subpestaña Estilo controla el ancho máximo, el color del texto, el color de fondo, el color de la flecha, el relleno, el borde, el radio del borde, la alineación del texto, la sombra del cuadro y la tipografía. La burbuja puede coincidir con su marca en lugar de parecer un navegador predeterminado.
¿qué animaciones admite la información sobre herramientas?
Siete opciones: Ninguna, Desvanecimiento, Cambio hacia adelante, Escala, Perspectiva y Efecto de relleno. También controlas la duración de la animación en milisegundos y el retraso antes de que se cierre la información sobre herramientas después de que salga el cursor.
¿la extensión Tooltip es gratuita?
Sí. Tooltips se envía con la versión gratuita de Master Addons para Elementor, en el grupo de Widgets dinámicos de la pestaña Extensiones. El página de precios muestra lo que los planes Pro agregan más allá de las extensiones gratuitas.
Envolviendo #
La extensión Tooltip para Elementor coloca una pequeña nota flotante con estilo en cualquier cosa que construyas: gira el interruptor en la pestaña Avanzado, escribe el texto, selecciona la ubicación y la animación, y estiliza la burbuja una vez. Se lee como parte de su diseño, no como un navegador sobrante. Para obtener más actualizaciones de pestañas avanzadas, explore Widgets y extensiones de complementos maestros, o ver el Extensión del morfismo de vidrio para otro efecto de un solo alterno.
