¿Qué son tooltips móviles?

tooltips móviles son un patrón de interfaz de usuario que dirige la atención del usuario a un área específica de la pantalla de una aplicación. Son ideales para la integración de usuarios, anuncios de funciones y guías contextuales.

Información sobre herramientas flotante

Compatible con SDK 2.0 y superiores.

tooltips flotantes se enfocan en un área de la pantalla. Funcionan bien cuando se enfocan en una parte estática de la pantalla de la aplicación, como un elemento de la barra de navegación.

tooltips flotantes son compatibles con todos los marcos de aplicaciones, por lo que son una excelente opción para los usuarios de Ionic, ya que no admitimos esos marcos para tooltips ancladas.

Información sobre herramientas anclada

Compatible con SDK 2.1 y superiores.

tooltips ancladas se dirigirán a un elemento en la pantalla mediante un selector que lo identifica. El patrón tooltip anclada solo está disponible actualmente para aplicaciones nativas de iOS , Android, React Native y Flutter.

Bloques de contenido de información sobre herramientas anclados y flotantes

tooltips flotantes y ancladas para dispositivos móviles tienen los siguientes bloques de contenido disponibles:

• Texto
• Imagen/GIF
• Héroe/Encabezado
• Botón
• Emoji
• Icono con texto

Acciones de destino de la información sobre herramientas

De forma predeterminada, el área de la información tooltip está configurada como "No hacer nada". Esto significa que si un usuario toca el área de la información tooltip no ocurrirá nada.
La acción de interacción de destino se puede actualizar para realizar cualquiera de las siguientes acciones:

• No hacer nada
• Siguiente paso
• Ir al enlace
• Flujo de activación
• Descartar flujo
• Ir al paso personalizado

Además de la interacción con el objetivo, el área objetivo se puede configurar para activar cualquiera de las siguientes opciones:

• Evento de pista
• Actualizar las propiedades del usuario

Cómo dar estilo a las descripciones emergentes ancladas y flotantes

tooltips ancladas y flotantes tienen las siguientes opciones de estilo:

• Fondo: permite al usuario oscurecer la pantalla de la aplicación detrás de la tooltip para atraer más atención al área que la tooltip resalta.
• Sombra paralela: el efecto de sombra detrás del patrón de información tooltip que agrega dimensión al tipo de patrón en relación con el fondo de la pantalla de la aplicación.
• Resaltar: agrega una estética de "ojo de cerradura" a un área o elemento según la configuración del usuario: el usuario tiene la capacidad de controlar el tamaño y el efecto de difuminado de esta opción de diseño.
• Puntero: permite al usuario activar y desactivar el puntero, así como ajustar sus dimensiones.

Colocación y ajuste de información sobre herramientas flotante

En la barra lateral de estilo, el usuario puede hacer clic en la pestaña "Objetivo" y usar los porcentajes de posición relativa, o hacer clic en el botón "Ajustar ubicación del objetivo" para usar una cruz y seleccionar una posición relativa en el panel de vista previa. Para ajustar la ubicación, seleccione "Superior", "Inferior" o Automático (nota: esta es la ubicación preferida; si selecciona "Inferior", pero el objetivo ya está abajo, la tooltip se moverá automáticamente a la parte superior para que encaje en la pantalla).

También puede ajustar la distancia desde el objetivo ingresando un valor.

Colocación y ajuste de información sobre herramientas anclada

Para usar el patrón tooltip anclada, debe seleccionar o cargar una captura de pantalla . Puede hacer clic en "Seleccionar captura de pantalla" en el panel de vista previa o en el icono de captura de pantalla en la parte superior de la barra lateral.

Luego, la captura de pantalla completará los elementos seleccionables que puedes seleccionar desde la vista previa de la pantalla de la aplicación o desde la lista de elementos seleccionables en la barra lateral de la pestaña de destino.
Para ajustar la ubicación, seleccione “superior”, “inferior” o automático (nota: esta es la ubicación preferida; si selecciona “inferior”, pero el objetivo ya está en la parte inferior, la tooltip se moverá automáticamente a la parte superior para que encaje en la pantalla).

Preguntas frecuentes

¿Cómo avanzan tooltips ? ¿Puede un usuario hacer clic en un elemento para avanzar en el flujo?

Sí, la acción de interacción objetivo se puede configurar para cualquier tooltip y, al hacer clic en el área objetivo, se activará la interacción. Para que el usuario avance al siguiente paso del flujo, puede configurar la acción como "Siguiente paso".

¿Puede un usuario final interactuar con elementos en la pantalla mientras se muestra la tooltip ?

No, el usuario final no puede interactuar con la aplicación mientras se muestra una tooltip . Existe la opción de configurar la descripción tooltip como "Tocar para cerrar", de modo que el flujo de tooltip se cierre si el usuario final hace clic en la pantalla fuera de tooltip .

¿Las acciones de los botones de pasos anteriores son compatibles con tooltips móvil?

Sí

¿Los pasos de navegación son compatibles con tooltips móvil?

Sí - ver la documentación aquí

¿Puede un usuario anclar un elemento que está fuera de la pantalla? (Al desplazarse, verá la tooltip ).

En este momento, no admitimos la posibilidad de apuntar a un elemento fuera de la pantalla al cual el usuario tendría que desplazarse.

Además, el usuario final no puede desplazarse mientras se muestra la tooltip , ya que no puede interactuar con la pantalla de la aplicación mientras se presenta un flujo de tooltip .

Solución de problemas

¿Por qué mi captura de pantalla no muestra los elementos seleccionables?

Asegúrese de que sus desarrolladores hayan configurado su aplicación para permitir que los elementos comunes sean identificables.

A continuación, encontrará la documentación técnica pertinente que describe dicho proceso:

• iOS
• Androide
• React Native
• Aleteo