Compartilhar via

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, 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 passar 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 descartada pressionando a tecla CTRL.

Uma dica de ferramenta

Esse é o controle correto?

Use uma dica de ferramenta para revelar mais informações sobre um controle antes de solicitar que o usuário execute uma ação. As dicas de ferramentas devem ser usadas com moderação e somente quando estiverem agregando valor distinto para o usuário que está tentando concluir uma tarefa. Uma regra geral é que, se as informações estiverem disponíveis em outro lugar na mesma experiência, você não precisará de uma dica de ferramenta. Uma dica de ferramenta valiosa esclarecerá uma ação pouco clara.

Quando você deve usar uma dica de ferramenta? Para decidir, considere estas perguntas:

  • Informações devem se tornar visíveis com base no foco do ponteiro? Caso contrário, 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? Caso contrário, use uma dica de ferramenta para fornecer o rótulo. É uma boa prática de design de UX rotular a maioria dos controles embutidos e, para eles, você não precisa de dicas de ferramentas. Os controles da barra de ferramentas e os botões de comando que mostram apenas ícones precisam de dicas de ferramentas.

  • Um objeto se beneficia de uma descrição ou informações adicionais? Em caso afirmativo, use uma dica de ferramenta. Mas o texto deve ser suplementar - isto é, não essencial para as tarefas primárias. Se for essencial, coloque-o diretamente na interface do usuário para que os usuários não precisem descobri-lo ou procurá-lo.

  • As informações complementares são um erro, aviso ou status? Nesse caso, use outro elemento de interface do usuário, como um submenu.

  • Os usuários precisam interagir com a dica? Em caso afirmativo, use outro controle. Os usuários não podem interagir com as dicas porque mover o mouse as faz desaparecer.

  • Os usuários precisam imprimir as informações complementares? Em caso afirmativo, use outro controle.

  • Os usuários considerarão as dicas incômodas ou distrativas? Nesse caso, considere usar outra solução – incluindo não fazer nada. Se você usar dicas em que elas possam distrair, permita que os usuários as desativem.

Recomendações

  • Use dicas de ferramentas com moderação (ou não). As dicas de ferramentas são uma interrupção. Uma dica de ferramenta pode ser tão perturbadora quanto um pop-up, portanto, não as use a menos que agreguem valor significativo.
  • Mantenha o texto da dica de ferramenta conciso. As dicas de ferramentas são perfeitas para frases curtas e fragmentos de frases. Grandes blocos de texto podem ser esmagadores e a dica de ferramenta pode expirar antes que o usuário termine de ler.
  • Crie um texto útil e complementar de dica de ferramenta. O texto da dica de ferramenta deve ser informativo. Não deixe isso óbvio ou apenas repita o que já está na tela. Como o texto da dica de ferramenta nem sempre é visível, ele deve ser informações complementares que os usuários não precisam ler. Comunique informações importantes usando rótulos de controle autoexplicativos ou texto suplementar in-loco.
  • Use imagens quando apropriado. Às vezes, é melhor usar uma imagem em uma dica de ferramenta. Por exemplo, quando o usuário passa o mouse sobre um hiperlink, você pode usar uma dica de ferramenta para mostrar uma visualização da página vinculada.
  • Os aceleradores de teclado são exibidos nas dicas de ferramentas 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 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 de 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. 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);

Sumário

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