Partilhar via

Dicas de ferramentas

Uma dica de ferramenta é um pop-up que contém informações adicionais sobre outro controle ou objeto. As dicas de ferramentas são exibidas automaticamente quando o utilizador move o foco para, pressiona e mantém pressionado ou passa o ponteiro sobre o controlo 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, um tooltip também pode ser descartado pressionando a tecla CTRL.

Uma dica de ferramenta

Será este o controlo correto?

Utilize uma dica de ferramenta para revelar mais informações sobre um controlo antes de solicitar que o utilizador execute uma ação. As dicas de ferramentas devem ser usadas com moderação e somente quando estão 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 questões:

  • As informações devem ficar visíveis com base no ponteiro do mouse? Caso contrário, use outro comando. 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 UX design rotular a maioria dos controles em linha e, para isso, 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 beneficia de uma descrição ou de mais informações? Se for o caso, use uma dica de ferramenta. Mas o texto deve ser suplementar, ou seja, 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 buscá-lo.

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

  • Os usuários precisam interagir com a dica? Em caso afirmativo, utilize outro controlo. 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 suplementares? Em caso afirmativo, utilize outro controlo.

  • Os usuários acharão as dicas irritantes ou perturbadoras? Em caso afirmativo, considere usar outra solução — incluindo não fazer nada. Caso utilize dicas onde possam ser distrativas, permita que os utilizadores as desativem.

Recomendações

  • Use dicas de ferramentas com moderação (ou nem sequer). As dicas de ferramentas são uma interrupção. Uma dica de ferramenta pode ser tão perturbadora quanto um pop-up, por isso não a utilize, a menos que agregue valor significativo.
  • Mantenha o texto da dica de ferramenta conciso. As dicas são perfeitas para frases curtas e fragmentos de frases. Grandes blocos de texto podem ser intimidantes e a dica de ferramenta pode expirar antes que o usuário termine a leitura.
  • Crie um texto útil e suplementar de dica de ferramenta. O texto da dica de ferramenta deve ser informativo. Não torne isso óbvio ou apenas repita o que já está na tela. Como o texto da dica de ferramenta nem sempre está visível, devem ser informações adicionais às quais os utilizadores não necessitam de prestar atenção. Comunique informações importantes usando rótulos de controle autoexplicativos ou texto suplementar no próprio local.
  • 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.
  • Aceleradores de teclado são exibidos em 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 um tooltip para exibir texto já visível na interface. 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.

Criar uma dica de ferramenta

Abra a aplicação WinUI 3 Gallery e veja o tooltip em ação

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

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

Em XAML, use a propriedade anexada ToolTipService.Tooltip para atribuir o 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 Dica de Ferramenta. Aqui está um exemplo de como usar um de imagem em uma dica de ferramenta.

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

Colocação

Por padrão, uma dica de ferramenta é exibida centralizada acima do ponteiro. O posicionamento não é restringido pela janela do aplicativo, portanto, a dica de ferramenta pode ser exibida parcial ou completamente fora dos limites da janela do aplicativo.

Para ajustes amplos, use a propriedade Placement ou a propriedade anexada ToolTipService.Placement para especificar se a Dica de Ferramentas deve ser exibida acima, abaixo, à esquerda ou à direita do ponteiro. Pode definir as propriedades VerticalOffset ou HorizontalOffset para alterar a distância entre o ponteiro e o ToolTip. Apenas um dos valores de deslocamento influenciará a posição final - VerticalOffset quando o Posicionamento for Superior ou Inferior, HorizontalOffset quando o Posicionamento for Esquerdo ou Direito.

<!-- 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 um Tooltip obscurecer o conteúdo a que se refere, pode ajustar o seu posicionamento precisamente utilizando a propriedade PlacementRect. O PlacementRect serve como âncora para a posição da Dica de Ferramentas e também como uma área que a Dica de Ferramentas não irá obstruir, desde que haja espaço suficiente no ecrã para exibir a Dica de Ferramentas fora dessa área. Você pode especificar a origem do retângulo em relação ao proprietário da dica de ferramenta, bem como a altura e a largura da área de exclusão. A propriedade Placement definirá se a Dica de Ferramentas deve exibir acima, abaixo, à esquerda ou à direita do 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 e WinUI 2

Importante

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

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

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

Recomendamos 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 este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.