Compartilhar via

Visão geral de dica de ferramenta

  • Artigo

Uma dica de ferramenta é uma pequena janela pop-up que aparece quando um usuário pausa o ponteiro do mouse sobre um elemento, como sobre um Button. Este tópico apresenta a dica de ferramenta e discute como criar e personalizar o conteúdo da dica de ferramenta.

O que é uma dica de ferramenta

Quando um usuário move o ponteiro do mouse sobre um elemento que tem uma dica de ferramenta, uma janela que contém o conteúdo da dica de ferramenta (por exemplo, conteúdo de texto que descreve a função de um controle) aparece por um período de tempo especificado. Se o usuário mover o ponteiro do mouse para longe do controle, a janela desaparecerá porque o conteúdo da dica de ferramenta não poderá receber o foco.

O conteúdo de uma dica de ferramenta pode conter uma ou mais linhas de texto, imagens, formas ou outro conteúdo visual. Você define uma dica de ferramenta para um controle definindo uma das seguintes propriedades para o conteúdo da dica de ferramenta.

Qual propriedade você usa depende de se o controle que define a dica de ferramenta herda da classe FrameworkContentElement ou FrameworkElement.

Criando uma dica de ferramenta

O exemplo a seguir mostra como criar uma dica de ferramenta simples, definindo a propriedade ToolTip de um controle Button com uma cadeia de caracteres de texto.

<Button ToolTip="Click to submit your information" 
        Click="SubmitCode" Height="20" Width="50">Submit</Button>

Você também pode definir uma dica de ferramenta como um objeto ToolTip. O exemplo a seguir usa XAML para especificar um objeto ToolTip como a dica de ferramenta de um elemento TextBox. Observe que o exemplo especifica o ToolTip definindo a propriedade FrameworkElement.ToolTip.

<TextBox HorizontalAlignment="Left">ToolTip with non-text content
  <TextBox.ToolTip>
    <ToolTip>
      <DockPanel Width="50" Height="70">
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </DockPanel>
    </ToolTip>
  </TextBox.ToolTip>
</TextBox>

O exemplo a seguir usa código para gerar um objeto ToolTip. O exemplo cria um ToolTip (tt) e o associa a um Button.

button = new Button();
button.Content = "Hover over me.";
tt = new ToolTip();
tt.Content = "Created with C#";
button.ToolTip = tt;
cv2.Children.Add(button);

button = New Button()
button.Content = "Hover over me."
tt = New ToolTip()
tt.Content = "Created with Visual Basic"
button.ToolTip = tt
cv2.Children.Add(button)

Você também pode criar conteúdo da dica de ferramenta que não esteja definido como um objeto ToolTip colocando o conteúdo da dica de ferramenta em um elemento de layout, como DockPanel. O exemplo a seguir mostra como definir a propriedade ToolTip de uma TextBox para o conteúdo que está dentro de um controle DockPanel.

<TextBox>
  ToolTip with image and text
  <TextBox.ToolTip>
       <StackPanel>
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </StackPanel>
  </TextBox.ToolTip>

Usando as propriedades das classes ToolTip e ToolTipService

Você pode personalizar o conteúdo da dica de ferramenta definindo propriedades visuais e aplicando estilos. Se você definir o conteúdo da dica de ferramenta como um objeto ToolTip, poderá definir as propriedades visuais do objeto ToolTip. Caso contrário, você deve definir propriedades anexadas equivalentes na classe ToolTipService.

Para obter um exemplo de como definir propriedades para especificar a posição do conteúdo da dica de ferramenta usando as propriedades ToolTip e ToolTipService, consulte Posicionar uma dica de ferramenta.

Definindo o estilo de uma dica de ferramenta

Você pode estilizar um ToolTip ao definir um Stylepersonalizado. O exemplo a seguir define um Style chamado Simple que mostra como compensar o posicionamento do ToolTip e alterar sua aparência definindo o Background, Foreground, FontSizee FontWeight.

<Style TargetType="ToolTip">
  <Setter Property = "HorizontalOffset" Value="10"/>
  <Setter Property = "VerticalOffset" Value="10"/>
  <Setter Property = "Background" Value="LightBlue"/>
  <Setter Property = "Foreground" Value="Purple"/>
  <Setter Property = "FontSize" Value="14"/>
  <Setter Property = "FontWeight" Value="Bold"/>
</Style>

Usando as propriedades de intervalo de tempo do ToolTipService

A classe ToolTipService fornece as seguintes propriedades para você definir os tempos de exibição da dica de ferramenta: InitialShowDelay, BetweenShowDelay e ShowDuration.

Use as propriedades InitialShowDelay e ShowDuration para especificar um atraso, normalmente breve, antes que um ToolTip apareça e também especifique por quanto tempo um ToolTip permanece visível. Para obter mais informações, consulte Como adiar a exibição de uma dica de ferramenta.

A propriedade BetweenShowDelay determina se as dicas de ferramentas para controles diferentes aparecem sem um atraso inicial quando você move o ponteiro do mouse rapidamente entre eles. Para obter mais informações sobre a propriedade BetweenShowDelay, consulte Usar a propriedade BetweenShowDelay.

O exemplo a seguir mostra como definir essas propriedades para uma dica de ferramenta.

<Ellipse Height="25" Width="50" 
         Fill="Gray" 
         HorizontalAlignment="Left"
         ToolTipService.InitialShowDelay="1000"
         ToolTipService.ShowDuration="7000"
         ToolTipService.BetweenShowDelay="2000">
  <Ellipse.ToolTip>
    <ToolTip Placement="Right" 
             PlacementRectangle="50,0,0,0"
             HorizontalOffset="10" 
             VerticalOffset="20"
             HasDropShadow="false"
             Opened="whenToolTipOpens"
             Closed="whenToolTipCloses"
             >
      <BulletDecorator>
        <BulletDecorator.Bullet>
          <Ellipse Height="10" Width="20" Fill="Blue"/>
        </BulletDecorator.Bullet>
        <TextBlock>Uses the ToolTip Class</TextBlock>
      </BulletDecorator>
    </ToolTip>
  </Ellipse.ToolTip>
</Ellipse>

Consulte também