Dicas de ferramenta

  • Artigo

Uma dica de ferramenta é um pop-up que contém informações adicionais sobre outro controle ou objeto. As dicas de ferramenta são exibidas automaticamente quando o usuário move o foco para, pressiona e segura ou passa o ponteiro sobre o controle associado. A dica de ferramenta desaparece quando o usuário move o foco, para de pressionar ou para de focalizar o ponteiro sobre o controle associado (a menos que o ponteiro esteja se movendo em direção à dica de ferramenta).

Observação

A partir do Windows 11 versão 21H2, uma dica de ferramenta também pode ser ignorada pressionando a tecla CTRL.

Dica de ferramenta

Esse é o controle correto?

Use uma dica de ferramenta para descobrir mais informações sobre um controle antes de solicitar que o usuário execute uma ação. As dicas de ferramenta devem ser usadas de forma comedida e apenas quando são valiosas para o usuário que está tentando executar uma tarefa. Uma regra prática é que, se as informações estiverem disponíveis em outro lugar na mesma experiência, você não precisa de uma dica de ferramenta. Uma dica de ferramenta útil esclarece uma ação que não é clara.

Quando devo usar uma dica de ferramenta? Para decidir, considere estas perguntas:

  • Informações devem se tornar visíveis com base no foco do ponteiro? Se não, use outro controle. Exiba dicas apenas como resultado da interação do usuário; nunca as exiba por conta própria.

  • Um controle tem um rótulo de texto? Se não, use uma dica de ferramenta para fornecer o rótulo. É uma boa prática de design de UX rotular a maioria dos controles em linha, e para isso você não precisa de dicas de ferramenta. Controles de barra de ferramentas e botões de comando que mostrem apenas ícones precisam de dicas de ferramentas.

  • Um objeto se beneficia de uma descrição ou informações adicionais? Se sim, use uma dica de ferramenta. Mas o texto deve ser complementar, ou seja, não essencial às tarefas principais. Se for essencial, coloque-o diretamente na interface do usuário para que os usuários não precisem procurar nem buscá-lo.

  • As informações complementares são um erro, aviso ou status? Se sim, use outro elemento da interface do usuário, como um menu suspenso.

  • Os usuários precisam interagir com a dica? Se sim, use outro controle. Os usuários não podem interagir com dicas porque mover o mouse faz com que elas desapareçam.

  • Os usuários precisam imprimir as informações complementares? Se sim, use outro controle.

  • Os usuários irão considerar as dicas incômodas ou distrativas? Se sim, considere usar outra solução, incluindo não fazer nada. Se você usar dicas onde elas possam distrair os usuários, deixe que eles as ative ou desative.

Recomendações

  • Use dicas de ferramentas com moderação (ou não as use). Dicas de ferramentas são uma interrupção. Uma dica de ferramenta pode distrair tanto quanto um pop-up, portanto não os utilize, a menos que eles adicionem valor significativo.
  • Mantenha o texto de dica de ferramenta conciso. Dicas de ferramentas são perfeitas para frases curtas e fragmentos de frases. Grandes blocos de texto podem ser complicados, e a dica de ferramenta pode expirar antes de o usuário terminar a leitura.
  • Crie textos de dica de ferramenta que sejam úteis e adicionem algo. O texto da dica de ferramenta deve ser informativo. Não crie um texto óbvio nem repita apenas o que já está na tela. Como o texto de dica de ferramenta nem sempre fica visível, devem ser informações complementares que os usuários não precisam ler. Comunique informações importantes usando rótulos de controle autoexplicativos ou texto complementar in-loco.
  • Use imagens quando for apropriado. Às vezes é melhor usar uma imagem em uma dica de ferramenta. Por exemplo, quando o usuário passar o ponteiro do mouse sobre um hiperlink, você poderá usar uma dica de ferramenta para mostrar uma prévia da página vinculada.
  • Os aceleradores de teclado são exibidos em dicas de ferramenta por padrão. Se você adicionar sua própria dica de ferramenta, certifique-se de que ela inclua informações sobre os aceleradores de teclado que estão disponíveis.
  • Não use uma dica de ferramenta para exibir texto já visível na interface do usuário. Por exemplo, não coloque uma dica de ferramenta em um botão que mostre o mesmo texto do botão.
  • Não coloque controles interativos dentro da dica de ferramenta.
  • Não coloque imagens que pareçam interativas dentro da dica de ferramenta.

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK do Aplicativo Windows e o WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam o WinUI 2. Consulte a referência da API da UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações necessárias para usar o controle em um aplicativo UWP ou WinUI 2.

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .

É recomendável usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles. O WinUI 2.2 ou posterior inclui um novo modelo para esse controle que usa cantos arredondados. Para obter mais informações, confira Raio de canto.

Criar uma dica de ferramenta

Abra o aplicativo Galeria do WinUI 3 e veja a Dica de Ferramenta em ação.

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

Uma ToolTip deve ser atribuída a outro elemento de interface do usuário que é seu proprietário. A classe ToolTipService fornece métodos estáticos para exibir uma ToolTip.

No XAML, use a propriedade associada ToolTipService.Tooltip para atribuir a ToolTip a um proprietário.

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

No código, use o método ToolTipService.SetToolTip para atribuir a ToolTip a um proprietário.

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

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

Conteúdo

Você pode usar qualquer objeto como o Conteúdo de uma ToolTip. Veja um exemplo de uso de uma Imagem em uma ToolTip.

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

Posicionamento

Por padrão, uma ToolTip é exibida centralizada acima do ponteiro. O posicionamento não é restringido pela janela do aplicativo, para que a ToolTip seja exibida parcial ou totalmente fora dos limites da janela de aplicativo.

Use a propriedade Placement ou a propriedade ToolTipService.Placement associada para posicionar a ToolTip acima, abaixo, à esquerda ou à direita do ponteiro. Você pode definir as propriedades VerticalOffset ou HorizontalOffset para alterar a distância entre o ponteiro e a ToolTip. Somente um dos dois valores de deslocamento influenciará a posição final – VerticalOffset quando Placement for Top ou Bottom, HorizontalOffset quando Placement for Left ou 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>

Se uma Dica de Ferramenta obscurecer o conteúdo ao qual está se referindo, você poderá ajustar seu posicionamento com precisão usando a propriedade PlacementRect . PlacementRect ancora a posição da ToolTip e também serve como uma área que não será coberta por ela, desde que haja espaço suficiente na tela para desenhar a ToolTip fora desta área. Você pode especificar a origem do retângulo em relação ao proprietário da dica de ferramenta e a altura e largura da área de exclusão. A propriedade Placement definirá se a ToolTip deve ser desenhada acima, abaixo, à esquerda ou à direita 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>

Obter o código de exemplo