Información sobre herramientas

  • Artículo

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 hacia, 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).

Nota

A partir de Windows 11 versión 21H2, también se puede descartar una información sobre herramientas presionando la tecla CTRL.

Una información sobre herramientas

¿Es este el control adecuado?

Usa información sobre herramientas para ofrecer más información sobre un control antes de pedir al usuario que realice una acción. Los controles de información sobre herramientas deben usarse de vez en cuando y solamente cuando aporten un valor determinado para el usuario que intenta finalizar una tarea. Por regla general, si la información se encuentra disponible en todas partes en la misma experiencia, no es necesaria la información sobre herramientas. Esta información será valiosa cuando explique una acción poco clara.

¿Cuándo deberías usar información sobre herramientas? Para decidirte, intenta responder a estas preguntas:

  • ¿Debe ser visible la información en función de desplazamiento del puntero? Si no es así, usa otro control. Las sugerencias deben aparecer como resultado de la interacción del usuario, y nunca deben mostrarse de forma indiscriminada.

  • ¿Tiene el control una etiqueta de texto? Si no es así, usa la información sobre herramientas para proporcionar la etiqueta que no tiene. Una buena práctica de diseño de la experiencia de usuario consiste en etiquetar la mayoría de los controles en línea, y para esos no necesitarás usar información sobre herramientas. Los controles de la barra de herramientas y los botones de comando que muestran solo iconos necesitan información sobre herramientas.

  • ¿Se beneficiaría el objeto de una descripción o de cierta información adicional? Si es así, usa la información sobre herramientas. Pero el texto debe ser complementario, es decir, no debe ser algo esencial para la tarea principal. Si es un concepto esencial, deberías ponerlo directamente en la UI para que los usuarios no tengan que descubrirlo ni buscarlo.

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

  • ¿Es necesario que los usuarios interactúen con el texto de información? Si es así, usa otro control. Los usuarios no pueden interactuar con el texto de información ya que en cuanto se mueve el mouse el texto desaparece.

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

  • ¿Es posible que el texto de información estorbe o distraiga a los usuarios? Si es así, plantéate la opción de usar otra solución, sin descartar la idea de no hacer nada. Si vas a usar sugerencias en lugares donde pueden resultar una distracción, permite que los usuarios puedan desactivarlas.

Recomendaciones

  • Usa información sobre herramientas con moderación (o no la uses en absoluto). La información sobre herramientas es una interrupción. La información sobre herramientas puede distraer tanto como un elemento emergente, así que no la uses a no ser que aporte un valor importante.
  • El texto de la información sobre herramientas debe ser conciso. La información sobre herramientas son perfectas para frases cortas y fragmentos de frases. Los grandes bloques de texto pueden ser abrumadores y la información sobre herramientas puede agotar el tiempo antes de que el usuario haya terminado de leer.
  • Crea texto de información sobre herramientas complementario y de utilidad. El texto de la información sobre herramientas debe ser informativo. Trata de que no sea información obvia ni repetir lo que ya hay en pantalla. Como la información sobre herramientas no está siempre visible, debería ser información complementaria que no sea obligatorio que los usuarios lean. Comunica información importante con etiquetas de control que se expliquen por sí solas o texto complementario en contexto.
  • Usa imágenes cuando sea conveniente. En algunas ocasiones resulta mejor usar una imagen en la información sobre herramientas. Por ejemplo, cuando un usuario mantiene el puntero sobre un hipervínculo puedes usar la 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 uses la información sobre herramientas para mostrar texto que ya aparece en la interfaz de usuario. Por ejemplo, no pongas información sobre herramientas en un botón si muestra el mismo texto del botón.
  • No pongas controles interactivos dentro de la información sobre herramientas.
  • No pongas imágenes que parezcan interactivas dentro de la información sobre herramientas.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Las API de este control existen 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 y plantillas más actuales para todos los controles. WinUI 2.2 o posterior 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

Abra la aplicación Galería de WinUI 3 y vea la información sobre herramientas en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o 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>

Obtención del código de ejemplo