ToolTip

A tooltip is a small pop-up window that appears when a user pauses the mouse pointer over an element, such as over a Button. When a user moves the mouse pointer over an element that has a tooltip, a window that contains tooltip content (for example, text content that describes the function of a control) appears for a specified amount of time. If the user moves the mouse pointer away from the control, the window disappears because the tooltip content can't receive focus.

The following illustration shows a mouse pointer that points to the Close Button, which displays its identifying ToolTip.

Close button with its tooltip displayed

The content of a tooltip can contain one or more lines of text, images, shapes, or other visual content. You define a tooltip for a control by setting one of the following properties to the tooltip content:

• FrameworkContentElement.ToolTip
• FrameworkElement.ToolTip

Which property you use depends on whether the control that defines the tooltip inherits from the FrameworkContentElement or FrameworkElement class.

Create a ToolTip

The following example shows how to create a simple tooltip by setting the ToolTip property for a Button control to a text string.

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

You can also define a tooltip as a ToolTip object. The following example uses XAML to specify a ToolTip object as the tooltip of a TextBox element. The example specifies the ToolTip by setting the FrameworkElement.ToolTip property.

<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>

The following example uses code to generate a ToolTip object. The example creates a ToolTip (tt) and associates it with a 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)

You can also create tooltip content that isn't defined as a ToolTip object by enclosing the tooltip content in a layout element, such as a DockPanel. The following example shows how to set the ToolTip property of a TextBox to content that's enclosed in a DockPanel control.

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

Customize a ToolTip

You can customize tooltip content by setting visual properties and applying styles. If you define the tooltip content as a ToolTip object, you can set the visual properties of the ToolTip object. Otherwise, you must set equivalent attached properties on the ToolTipService class.

For an example of how to set properties in order to specify the position of tooltip content by using the ToolTip and ToolTipService properties, see Position a ToolTip.

Time interval properties

The ToolTipService class provides the following properties for you to set tooltip display times: InitialShowDelay, BetweenShowDelay, and ShowDuration.

Use the InitialShowDelay and ShowDuration properties to specify a delay, typically brief, before a ToolTip appears and also to specify how long a ToolTip remains visible. For more information, see How to: Delay the Display of a ToolTip.

The BetweenShowDelay property determines if tooltips for different controls appear without an initial delay when you move the mouse pointer quickly between them. For more information about the BetweenShowDelay property, see Use the BetweenShowDelay Property.

The following example shows how to set these properties for a tooltip.

<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>

Styles and templates

You can modify the default ControlTemplate to give the ToolTip control a unique appearance. For more information, see What are styles and templates? and How to create a template for a control.

Style a ToolTip

You can style a ToolTip by defining a custom Style. The following example defines a Style called Simple that shows how to offset the placement of the ToolTip and change its appearance by setting the Background, Foreground, FontSize, and 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>

Content property

The ContentControl.Content property is the content property of the ToolTip control. You can set this property directly in XAML without explicitly specifying the property name.

Parts

This control doesn't define any template parts.

Visual states

The following table lists the visual states for the ToolTip control.

See also

• Popup
• ToolTip
• ToolTipEventArgs
• ToolTipEventHandler
• ToolTipService
• Popup