A veces un diseño necesita una breve explicación sin darle una línea completa en la página. Ese es el trabajo de una información sobre herramientas: una pequeña burbuja que aparece al flotar, dice su pieza y se aparta del camino. El Información sobre herramientas widget adentro Complementos maestros para Elementor adjunta esa burbuja a un ícono, un fragmento de texto o una imagen, con control sobre la ubicación, la animación, el disparador y el estilo.
Esta guía recorre el widget desde el primer arrastre hasta una información sobre herramientas con estilo en la página en vivo.
Qué hace el widget Tooltip #
El widget coloca un pequeño elemento de destino en su página, un icono, texto o imagen, y vincula una burbuja de información sobre herramientas. Cuando los visitantes flotan o hacen clic en el objetivo, la burbuja aparece con su mensaje. La ubicación, la animación, el tiempo y las compensaciones son configurables, y la pestaña Estilo cubre tanto el objetivo como la burbuja.
Este es un widget independiente: el destino y su información sobre herramientas son el punto principal. Si desea agregar información sobre herramientas a los widgets que ya tiene en la página, Master Addons también envía una extensión de información sobre herramientas que se adjunta a cualquier elemento Elementor. El widget es la elección correcta cuando el objetivo de información sobre herramientas es su propio elemento de diseño pequeño, como un ícono de información al lado de un precio o un avatar de equipo con una burbuja de nombre.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- El widget Tooltip habilitado en el panel de opciones de complementos maestros, en Widgets básicos.
Cómo agregar el widget Tooltip #
En el editor Elementor, busque el Elementos panel para Información sobre herramientas y arrastre el widget a su página. Se carga con un ícono de información como destino predeterminado y una información sobre herramientas de marcador de posición ya conectada, por lo que al colocar el ícono en el lienzo se muestra la burbuja de inmediato.
Elija el tipo de contenido: icono, texto o imagen #
Abierto Configuración de contenido en la pestaña Contenido. El Tipo de contenido switcher en la parte superior ofrece tres objetivos:
- Icon: elija cualquier icono de la biblioteca Elementor. El círculo de información clásico es el predeterminado.
- Texto: escriba una palabra o frase, como “¡Hover Me!”, y la información sobre herramientas se adjunta a él.
- Imagen: elija una imagen de la biblioteca multimedia, útil para avatares y miniaturas de productos.
Se aplican dos controles a cada tipo. Alineación coloca el objetivo a la izquierda, al centro o a la derecha. Etiqueta HTML envuelve el objetivo en el marcado que elija: H1 a H6, div, span, p, botón o a. Quédese con p o span para obtener información sencilla sobre herramientas; Utilice el botón cuando el objetivo deba actuar como un control de accesibilidad.
Con Texto seleccionado, un campo Contenido reemplaza el selector de iconos:
Con Imagen seleccionado, la biblioteca multimedia se abre y la imagen elegida se convierte en el objetivo flotante:
Escriba la información sobre herramientas y establezca su comportamiento #
El Opciones de información sobre herramientas la sección controla la burbuja misma.
- Texto de información sobre herramientas: el mensaje dentro de la burbuja. Manténgalo en una o dos líneas; La información sobre herramientas es para sugerencias, no para párrafos.
- Sigue al cursor: deje que la burbuja siga al mouse en lugar de permanecer fijada al objetivo.
- Colocación: donde se encuentra la burbuja en relación con el objetivo. Arriba es el valor predeterminado, con Inicio superior, Abajo y los demás bordes disponibles.
- Animación: cómo entra la burbuja, Shift-Away de forma predeterminada.
- Activați: Hover muestra la burbuja al pasar el mouse; El clic espera un toque, que también funciona mejor en las pantallas táctiles.
- Duración y Retraso: velocidad de animación y cuánto tiempo persiste la burbuja después de que sale el cursor, ambos 300 milisegundos de forma predeterminada. Los valores predeterminados se sienten correctos para la mayoría de las páginas; solo ralentícelos si la información sobre herramientas contiene algo que los visitantes necesitan un tiempo más para leer.
El X compensación y Y desplazamiento los controles deslizantes alejan la burbuja de su lugar predeterminado. Útil cuando la información sobre herramientas necesita despejar un borde o sentarse junto a un objetivo de forma extraña.
Estila el objetivo #
En el Estilo tab, Estilos generales cubre el elemento de destino en la página.
- Ancho y relleno del contenido: el tamaño del bloque objetivo. La demostración lo amplía de 150 a 215 píxeles para darle espacio al avatar.
- Estados normales y flotantes: Color de fondo, color de texto, sombra de caja y tipografía para cada estado.
- Tipo de borde y radio de borde: enmarcar el objetivo; un radio de 4 píxeles mantiene las esquinas suaves.
Estila la burbuja de información sobre herramientas #
El Estilos de información sobre herramientas la sección diseña la burbuja y el lienzo la muestra en vivo mientras trabajas.
- Ancho de la información sobre herramientas: el ancho máximo de la burbuja, 200 píxeles de forma predeterminada. El texto se envuelve en su interior.
- Color de fondo y color de texto: la demostración se vuelve azul marino oscuro con texto blanco, el clásico aspecto de información sobre herramientas de alto contraste.
- Tipografía, Acolchado, Borde: el texto y el marco de la burbuja.
- Distancia: la brecha entre la burbuja y el objetivo, 10 píxeles de forma predeterminada.
- Alineación de texto y sombra de caja: los últimos toques. Una suave sombra ayuda a que la burbuja se lea flotando sobre la página.
El resultado en la página #
En la página en vivo, el objetivo permanece en silencio hasta que un visitante lo pasa por alto. Luego, la burbuja se anima en la ubicación elegida, se mantiene mientras el cursor permanece y se desvanece después del retraso que estableces.
Casos de uso comunes #
- Iconos de información además de las filas de precios, forme etiquetas y listas de funciones.
- Avatares del equipo eso revela un nombre y un papel en el vuelo estacionario.
- Términos del glosario en texto, con una breve definición en la burbuja.
- Miniaturas de productos con una especificación o nota que no merece espacio en la página.
- Botones de sólo iconos donde la información sobre herramientas nombra la acción.
Consejos para obtener mejores información sobre herramientas #
- Mantenga el texto breve. Una o dos líneas. Si el mensaje necesita más, pertenece al diseño, no a la información sobre herramientas.
- Utilice el disparador de clic para tocar a los visitantes. Hover no existe en los teléfonos; una información sobre herramientas activada por clic funciona en todas partes.
- Cuidado con el contraste. Burbuja oscura, texto claro o al revés. El ancho predeterminado de 200 píxeles con 10 rellenos se lee bien en tamaños de fuente típicos.
- Verifique la ubicación cerca de los bordes de la pantalla. Se puede recortar la información sobre herramientas superior en el primer elemento de una página; cámbielo a Abajo o use los desplazamientos.
- No ocultes información crítica en información sobre herramientas. Todo lo que los visitantes deben leer pertenece a la página; la burbuja es para extras.
Vídeotutorial #
Si prefieres ver la información sobre herramientas en acción, este breve vídeo cubre toda la configuración, desde arrastrar el widget hasta la burbuja de estilo en la página en vivo.
Preguntas frecuentes #
¿qué es el widget Tooltip en Master Addons?
Es un widget de Elementor que coloca un ícono, texto o imagen en la página y le adjunta una burbuja de información sobre herramientas. La burbuja aparece al pasar el cursor o hacer clic y usted controla su ubicación, animación, sincronización, compensaciones y estilo completo desde el panel Elementor.
¿puede el objetivo de información sobre herramientas ser una imagen?
Sí. Establezca el tipo de contenido en Imagen en Configuración de contenido y elija cualquier imagen de la biblioteca multimedia. La información sobre herramientas aparece cuando los visitantes pasan el cursor o hacen clic en la imagen, que se adapta a los avatares del equipo y las miniaturas del producto.
¿puedo mostrar la información sobre herramientas al hacer clic en lugar de pasar el cursor?
Sí. En Opciones de información sobre herramientas, cambie el activador de Hover a Click. La activación por clic también se comporta mejor en teléfonos y tabletas, donde el desplazamiento no existe.
¿cómo cambio dónde aparece la información sobre herramientas?
Utilice el menú desplegable Colocación en Opciones de información sobre herramientas para elegir la variante superior, inferior o inicial o final de cada borde. Luego, los controles deslizantes X Offset e Y Offset ajustan la posición exacta y la distancia establece la distancia desde el objetivo.
¿puedo diseñar la burbuja de información sobre herramientas?
Sí. La sección Estilos de información sobre herramientas en la pestaña Estilo controla el ancho de la burbuja, el color de fondo, el color del texto, la tipografía, el relleno, el borde, la distancia desde el objetivo, la alineación del texto y la sombra del cuadro. La vista previa del editor cambia en vivo.
Envolviendo #
El widget Tooltip maneja todo el patrón de burbuja de sugerencias en un solo lugar: elija un ícono, texto o destino de imagen, escriba el mensaje, configure el activador y la ubicación, y diseñe ambas mitades desde el panel Elementor. Explore el conjunto completo de Widgets y extensiones de complementos maestros para conocer la extensión Tooltip y todo lo demás en el cuadro, consulte el página de precios por lo que añade Pro.
