Compartir a través de

Tooltips

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 pone el foco en el control asociado, lo presiona y lo mantiene, o pasa el puntero sobre él. La información sobre la herramienta desaparece cuando el usuario mueve el foco desde, deja de hacer clic sobre, o deja de mantener el puntero sobre el control asociado (a menos que el puntero se mueva hacia la información sobre la herramienta).

Nota:

A partir de Windows 11 versión 21H2, también se puede descartar un mensaje de ayuda presionando la tecla CTRL.

Información sobre herramientas

¿Es este el control adecuado?

Use un tooltip para revelar 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. Un tooltip valioso aclarará una acción poco clara.

¿Cuándo debería usar un tooltip? Para decidirse, considere estas preguntas:

  • ¿Debe ser visible la información en función del desplazamiento del puntero? Si no, 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í, utilice un tooltip 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 ayuda contextual. 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 menú desplegable.

  • ¿Es necesario que los usuarios interactúen con la sugerencia? 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.

  • ¿Encontrarán los usuarios molestos o distraerán los consejos? Si es así, considere la posibilidad de usar otra solución, incluido no hacer nada en absoluto. Si utiliza consejos que puedan ser una distracción, permita a los usuarios desactivarlos.

Recommendations

  • Utiliza las ayudas emergentes con moderación (o no las uses en absoluto). La información sobre herramientas es una interrupción. Un aviso de información puede distraer tanto como una ventana emergente, por lo que no lo use a menos que aporte un valor significativo.
  • Mantenga conciso el texto de la información sobre herramientas. Los tooltips son perfectos para frases cortas y fragmentos de oraciones. Los bloques grandes de texto pueden ser abrumadores y la descripción emergente puede expirar 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 necesitan 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 un tooltip. Por ejemplo, cuando el usuario mantiene el puntero sobre un hipervínculo, puede usar un tooltip para mostrar una vista previa de la página vinculada.
  • Los aceleradores del teclado se muestran en los tooltips por defecto. 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 utilice una información sobre herramientas para mostrar el texto ya visible en la interfaz de usuario. Por ejemplo, no coloque un tooltip en un botón que muestre el texto igual que el del botón.
  • No coloque controles interactivos dentro de la información sobre herramientas.
  • No coloque imágenes que den la impresión de ser interactivas dentro de la información sobre herramientas.

Crear un tooltip

Abra la aplicación Galería de WinUI y observe el ToolTip en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue el código fuente en GitHub

Se debe asignar una información sobre herramientas a otro elemento de la interfaz de usuario que actúe como 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);

Content

Puedes usar cualquier objeto como Contenido de un tooltip. 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>

Colocación

De forma predeterminada, un tooltip aparece centrado arriba 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 el ToolTip. 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 un ToolTip oculta el contenido al que hace referencia, puede ajustar con precisión su ubicación mediante la propiedad PlacementRect. PlacementRect ancla la posición del ToolTip y también sirve como un área que el ToolTip no debe obstruir, siempre que haya espacio suficiente en la pantalla para dibujar el ToolTip fuera de esta área. Puedes especificar el origen del rectángulo respecto al propietario del cuadro de 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>

UWP y WinUI para UWP

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. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene la información que necesitas para utilizar el control en una aplicación UWP o WinUI 2.

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

Te recomendamos usar la versión más reciente de WinUI para UWP 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.

  • Last updated on