Informaciones sobre herramientas

Una información sobre herramientas es un elemento emergente que contiene información adicional sobre otro control o objeto. La información sobre herramientas se muestra automáticamente cuando el usuario mueve el foco a, presiona y mantiene el puntero sobre el control asociado. La información sobre herramientas desaparece cuando el usuario mueve el foco, deja de presionar o deja de mantener el puntero sobre el control asociado (a menos que el puntero se mueva hacia la información sobre herramientas).

¿Es este el control adecuado?

Use una información sobre herramientas para mostrar más información sobre un control antes de pedir al usuario que realice una acción. Las informaciones sobre herramientas se deben usar con moderación y solo cuando agregan un valor distinto para el usuario que intenta completar una tarea. Una regla general es que si la información está disponible en otra parte de la misma experiencia, no necesita información sobre herramientas. Una información valiosa sobre herramientas aclarará una acción poco clara.

¿Cuándo debe usar una información sobre herramientas? Para decidirse, considere estas preguntas:

• ¿Debe ser visible la información en función del desplazamiento del puntero? Si no es así, use otro control. Mostrar sugerencias solo como resultado de la interacción del usuario, nunca mostrarlas por sí mismas.

• ¿Tiene el control una etiqueta de texto? Si no es así, use una información sobre herramientas para proporcionar la etiqueta. Es una buena práctica de diseño de la experiencia del usuario etiquetar la mayoría de los controles insertados y para estos no necesita información sobre herramientas. Los controles de barra de herramientas y los botones de comando que muestran solo los iconos necesitan información sobre herramientas.

• ¿Se beneficiaría el objeto de una descripción o de cierta información adicional? Si es así, use una información sobre herramientas. Pero el texto debe ser complementario, es decir, no esencial para las tareas principales. Si es esencial, colóquelo directamente en la interfaz de usuario para que los usuarios no tengan que detectarlo ni buscarlo.

• ¿Es la información complementaria un error, una advertencia o un estado? Si es así, use otro elemento de interfaz de usuario, como un control flotante.

• ¿Es necesario que los usuarios interactúen con el texto de información? Si es así, use otro control. Los usuarios no pueden interactuar con sugerencias porque mover el mouse los hace desaparecer.

• ¿Necesitan los usuarios imprimir la información complementaria? Si es así, use otro control.

• ¿Es posible que el texto de información estorbe o distraiga a los usuarios? Si es así, considere la posibilidad de usar otra solución, incluida la inclusión de nada en absoluto. Si usa sugerencias en las que podrían distraerse, permita a los usuarios desactivarlas.

Recomendaciones

• Use información sobre herramientas con moderación (o no en absoluto). La información sobre herramientas es una interrupción. Una información sobre herramientas puede ser tan distraída como una ventana emergente, por lo que no las use a menos que agreguen un valor significativo.
• Mantenga el texto de la información sobre herramientas conciso. La información sobre herramientas es perfecta para frases cortas y fragmentos de oraciones. Los bloques grandes de texto pueden ser abrumadores y la información sobre herramientas puede agotar el tiempo de espera antes de que el usuario haya terminado de leer.
• Cree texto útil y complementario de información sobre herramientas. El texto de la información sobre herramientas debe ser informativo. No haga que sea obvio o simplemente repita lo que ya está en la pantalla. Dado que el texto de la información sobre herramientas no siempre está visible, debe ser información complementaria que los usuarios no tienen que leer. Comunique información importante mediante etiquetas de control autoexplicativas o texto complementario local.
• Use imágenes cuando corresponda. A veces es mejor usar una imagen en una información sobre herramientas. Por ejemplo, cuando el usuario mantiene el puntero sobre un hipervínculo, puede usar una información sobre herramientas para mostrar una vista previa de la página vinculada.
• Los aceleradores de teclado se muestran en la información sobre herramientas de forma predeterminada. Si agrega su propia información sobre herramientas, asegúrese de que incluye información sobre los aceleradores de teclado que están disponibles.
• No use una información sobre herramientas para mostrar el texto ya visible en la interfaz de usuario. Por ejemplo, no coloque una información sobre herramientas en un botón que muestre el mismo texto del botón.
• No coloque controles interactivos dentro de la información sobre herramientas.
• No coloque imágenes que parezcan interactivas dentro de la información sobre herramientas.

UWP y WinUI 2

Existen API para este control en el espacio de nombres Windows.UI.Xaml.Controls.

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos, las plantillas y las características más actuales de todos los controles. WinUI 2.2 o de versiones posteriores incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Crear una información sobre herramientas

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Se debe asignar una información sobre herramientas a otro elemento de interfaz de usuario que sea su propietario. La clase ToolTipService proporciona métodos estáticos para mostrar una información sobre herramientas.

En XAML, usa la propiedad adjunta ToolTipService.Tooltip para asignar la información sobre herramientas a un propietario.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

En código, usa el método ToolTipService.SetToolTip para asignar la información sobre herramientas a un propietario.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

Contenido

Puedes usar cualquier objeto como Contenido de una información sobre herramientas. Este es un ejemplo del uso de una Imagen en una información sobre herramientas.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Selección de ubicación

De manera predeterminada, una información sobre herramientas aparece centrada encima del puntero. La ubicación no está restringida por la ventana de la aplicación, por lo que es posible que la información sobre herramientas se muestre parcial o completamente fuera de los límites de la ventana de la aplicación.

Para realizar ajustes amplios, usa la propiedad Placement o la propiedad adjunta ToolTipService.Placement para especificar si la información sobre herramientas se debe dibujar encima, debajo, a la izquierda o la derecha del puntero. Puedes establecer las propiedades VerticalOffset u HorizontalOffset para cambiar la distancia entre el puntero y la información sobre herramientas. Solo uno de los dos valores de desplazamiento influirá en la posición final: VerticalOffset cuando el valor de Placement es Top o Bottom, HorizontalOffset cuando el valor de Placement es Left o Right.

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

Si una información sobre herramientas oculta el contenido al que hace referencia, puede ajustar su ubicación con precisión mediante la propiedad PlacementRect . PlacementRect ancla la posición de la información sobre herramientas y también sirve como un área que esa información sobre herramientas no obstruye, siempre y cuando haya suficiente espacio en la pantalla para dibujar la información sobre herramientas fuera de esta área. Puedes especificar el origen del rectángulo con relación al propietario de la información sobre herramientas, además del alto y ancho del área de exclusión. La propiedad Placement definirá si la información sobre herramientas se debe dibujar encima, debajo a la izquierda o a la derecha del área de PlacementRect.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

Obtener el código de ejemplo

• Muestra de la Galería WinUI: vea todos los controles XAML en un formato interactivo.

Artículos relacionados

• Clase ToolTip