ToolTip in WPF

The ToolTip element in XAML adds a tooltip to a WPF control. The ToolTip class represents a tooltip in C#. The ToolTip property of a control represents the tool tip of the control. Code examples in this this article show how to attach Tooltips to WPF controls using C# and XAML.

Introduction to WPF ToolTip Control

A WPF ToolTip control shows some information or a hint about a control in a floating box when the mouse hovers over that control and it disappears when the mouse is moved away from that control. In WPF, the ToolTip property is attached with a ToolTip control. You can either use a ToolTip XAML element at design time or a ToolTip C# object at runtime to create and attach a Tooltip to a control. In this article, we will learn how to use a Tooltip and its properties. I will show the following topics in this article:
 
 
Let's begin

Basic WPF ToolTip Example

Drag a Button control from the toolbox and drop it. Add a ToolTip property to the button with a message you want to show on mouse hover of the button. We can add a ToolTip in two ways. First the button shows the simplest way to display a ToolTip. The second method is preferred for creating a customized ToolTip.
  1. <Button Content="Click Here" Margin="30" FontSize="16" ToolTip="Click Here"></Button>  
  2. <Button Content="Click Here" Margin="30" FontSize="16">  
  3.         <Button.ToolTip>  
  4.                <ToolTip>  
  5.                    Click Here  
  6.                </ToolTip>  
  7.         </Button.ToolTip>  
  8. </Button>  
Preview

 
 

Customized/Complex WPF ToolTip Example

In this example, we create a ToolTip Layout using a StackPanel and other controls in a ToolTip element.
  1. <Button Content="Print" FontSize="16">  
  2.                 <Button.ToolTip>  
  3.                     <ToolTip>  
  4.                         <StackPanel Width="200">  
  5.                             <StackPanel Orientation="Horizontal" Background="Tan" Width="200">  
  6.                                 <Image Source="printer.png" Margin="10 5"></Image>  
  7.                                 <Label Content="Print" Margin="10 5" FontSize="20" FontWeight="Bold"></Label>  
  8.                             </StackPanel>  
  9.                             <TextBlock Text="Please Select your printer before giving Print Command" FontSize="14" TextWrapping="WrapWithOverflow"></TextBlock>  
  10.                             <Line Stroke="Gray" StrokeThickness="2" X2="200"></Line>  
  11.                             <TextBlock Text="Press F1 for Help" FontWeight="ExtraBold"></TextBlock>  
  12.                         </StackPanel>  
  13.                     </ToolTip>  
  14.                 </Button.ToolTip>  
  15. </Button>  
Preview:
 
 

ToolTipService.ShowDuration Property

The ToolTipService class provides various properties to control the display and the behaviour of ToolTips. Using the ToolTipService.ShowDuration property, we can set the amount of time that a ToolTip remains visible when the user places the mouse pointer over the control that defines the ToolTip. Its default value is 5000 milliseconds.
  1. <Button Content="ToolTipService.ShowDuration Property"   
  2.         ToolTip="ClickMe" ToolTipService.ShowDuration="5000">  
  3. </Button>  
Preview: 
 
 
 

ToolTipService.ShowOnDisabled Property

When a control is disabled then the ToolTip does not show on the mouse hover of the control. If you want to display aToolTip on a disabled control (in other words the IsEnabled property is set to False) than we need to set the ToolTipService.ShowOnDisabled attached property to True.
  1. <Button Content="Disabled Button" ToolTip="Click Me" IsEnabled="False" FontSize="16"></Button>  
  2. <Button Content="Disabled Button(ToolTipService.ShowOnDisabled)"   
  3.         ToolTip="Click Me" IsEnabled="False"   
  4.         Margin="0 10" FontSize="16"   
  5.         ToolTipService.ShowOnDisabled="True">  
  6. </Button>  
Preview: 
 
 

ToolTipService.InitialShowDelay Property

When the user hovers the mouse on a button, there is a delay before the tooltip is displayed. We can set this delay using the ToolTipService.InitialShowDelay property.
  1. <Button Content="ToolTipService.InitialShowDelay='1000'"   
  2.         ToolTip="Click Me" ToolTipService.InitialShowDelay="1000">  
  3. </Button>  

HorizontalOffset and VerticalOffset Property of ToolTip

We can adjust the position of the ToolTip using the HorizontalOffset and VerticalOffset properties of the ToolTip. The HorizontalOffset property sets the horizontal distance between the Mouse Pointer and the ToolTip popup alignment point and the VerticalOffset property sets the vertical distance between the Mouse Pointer and the ToolTip popup alignment point.
  1. <Button Content="HorizontalOffset and VerticalOffset" FontSize="16">  
  2.         <Button.ToolTip>  
  3.                 <ToolTip HorizontalOffset="20" VerticalOffset="20">  
  4.                     Click Me  
  5.                 </ToolTip>  
  6.         </Button.ToolTip>  
  7. </Button>  
Preview

 
 

HasDropShadow Property of ToolTip

The HasDropShadow property sets the dropped shadow of the Tooltip.
  1. <Button Content="HasDropShadow='True'" FontSize="16">  
  2.         <Button.ToolTip>  
  3.                 <ToolTip>  
  4.                      Click me  
  5.                 </ToolTip>  
  6.         </Button.ToolTip>  
  7. </Button>  
  8. <Button Content="HasDropShadow='False'" FontSize="16" Margin="0 40">  
  9.         <Button.ToolTip>  
  10.                 <ToolTip HasDropShadow="False">  
  11.                      Click me  
  12.                 </ToolTip>  
  13.         </Button.ToolTip>  
  14. </Button>  
Preview

 
 
I hope you like this. Thanks.