XAML

XAML ToolTip Reference

A ToolTip is a pop-up window that displays some information in a small window. The XAML Tooltip element represents a window tooltip that can be attached a WPF control using its ToolTip property. This article shows how to use a ToolTip control in WPF.
 
Creating a ToolTip
 
The ToolTip element represents a ToolTip control in XAML. 
  1. <ToolTip/>    
The IsOpen property indicates whether or not a ToolTip is visible. The HorizontalOffset and VerticalOffset properties represent the horizontal and vertical distance between the target control and the pop-up window. The Content property represents the contents of the ToolTip.
 
The code snippet in Listing 1 creates a ToolTip control and sets the horizontal offset, vertical offset and content of a ToolTip control. 
  1. <ToolTip Content="Hello! I am a ToolTip."     
  2. HorizontalOffset="10" VerticalOffset="20"/>    
Listing 1.
 
The output looks as in Figure 1.
 
WPF Tooltip
 
Figure 1.
 
ToolTip Service
 
To display a tooltip for a control, the ToolTipService class must be used. The SetToolTip and GetToolTip static methods are used to set and get the tooltip of a control. The following code snippet creates a ToolTipService.ToolTip for a control. 
  1. <ToolTipService.ToolTip >     
  2.     <ToolTip Content="Hello! I am a ToolTip."     
  3.     HorizontalOffset="10" VerticalOffset="20"/>    
  4. </ToolTipService.ToolTip>  
Listing 2.
 
The code snippet in Listing 3 sets a ToolTip of a Button control. 
  1. <Button Content="Mouse over me" Width="150" Height="30"    
  2.         Canvas.Top="10" Canvas.Left="10">    
  3.     <ToolTipService.ToolTip >     
  4.         <ToolTip Content="Hello! I am a ToolTip."     
  5.         HorizontalOffset="10" VerticalOffset="20"/>    
  6.     </ToolTipService.ToolTip>    
  7. </Button>   
Listing 3.
 
Then if you run the application and hover the mouse over the button control, the output looks as in Figure 2.
 
WPF Tooltip.Service
 
Figure 2.
 
WPF ToolTip with Image
 
The ToolTip content can be any control and multiple controls.
 
The code snippet in Listing 4 creates a ToolTip with an image and text in it. 
  1. <!-- Create a button -->    
  2. <Button Content="Mouse over me" Width="150" Height="30"     
  3.         Canvas.Top="50" Canvas.Left="20">    
  4.     <!-- Create a tooltip by using the ToolTipService -->    
  5.     <ToolTipService.ToolTip >    
  6.         <ToolTip HorizontalOffset="0" VerticalOffset="0">    
  7.             <!-- Add a StackPanel to the tooltip content -->    
  8.             <StackPanel Width="250" Height="150">    
  9.                 <!-- Add an image -->    
  10.                 <StackPanel.Background>    
  11.                     <ImageBrush ImageSource="Garden.jpg"    
  12.                                 Opacity="0.4"/>    
  13.                 </StackPanel.Background>    
  14.                 <!-- Add a text block -->    
  15.                 <TextBlock >    
  16.                     <Run Text="This is a tooltip with an image and text"    
  17.                         FontFamily="Georgia" FontSize="14" Foreground="Blue"/>    
  18.                 </TextBlock>    
  19.             </StackPanel>    
  20.         </ToolTip>    
  21.     </ToolTipService.ToolTip>    
  22. </Button>   
Listing 4.
 
The new tooltip looks as in Figure 3.
 
ToolTip with Image in WPF
Figure 3.
 
Using the previous approach, you can pretty much put any content as a ToolTip popup.  
 
Summary
 
In this article, I discussed how to add a tooltip to a control in WPF using XAML.
 
Here is a more complete tutorial on WPF ToolTip control - ToolTips in WPF 

Up Next
    Ebook Download
    View all
    Programming XAML
    Read by 12.3k people
    Download Now!
    Learn
    View all
    Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.
    Membership not found