Silverlight ToolTip Control
A ToolTip is a pop-up window that displays some information in a small window. The ToolTip class in .NET 3.5 represents a ToolTip. This article demonstrates how to create and use a ToolTip control by using XAML and C#.
Creating a ToolTip
The ToolTip element represents a ToolTip control in XAML.
<ToolTip/>
The IsOpen property represents if a ToolTip is visible or not. 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 offse and content of a ToolTip control.
<ToolTip Content="Hello! I am a ToolTip."
HorizontalOffset="10" VerticalOffset="20"/>
Listing 1
The output looks like Figure 1.
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.
<ToolTipService.ToolTip >
<ToolTip Content="Hello! I am a ToolTip."
HorizontalOffset="10" VerticalOffset="20"/>
</ToolTipService.ToolTip>
Listing 2
The code snippet in Listing 3 sets a ToolTip of a Button control.
<Button Content="Mouse over me" Width="150" Height="30"
Canvas.Top="10" Canvas.Left="10">
<ToolTipService.ToolTip >
<ToolTip Content="Hello! I am a ToolTip."
HorizontalOffset="10" VerticalOffset="20"/>
</ToolTipService.ToolTip>
</Button>
Listing 3
The new if you run the application and mouse over the button control, the output looks like Figure 2.
Figure 2
Creating a Fancy Tooltip
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.
<!-- Create a button -->
<Button Content="Mouse over me" Width="150" Height="30"
Canvas.Top="50" Canvas.Left="20">
<!-- Create a tooltip by using the ToolTipService -->
<ToolTipService.ToolTip >
<ToolTip HorizontalOffset="0" VerticalOffset="0">
<!-- Add a StackPanel to the tooltip content -->
<StackPanel Width="250" Height="150">
<!-- Add an image -->
<StackPanel.Background>
<ImageBrush ImageSource="Garden.jpg"
Opacity="0.4"/>
</StackPanel.Background>
<!-- Add a text block -->
<TextBlock >
<Run Text="This is a tooltip with an image and text"
FontFamily="Georgia" FontSize="14" Foreground="Blue"/>
</TextBlock>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
Listing 4
The new tooltip looks like Figure 3.
Figure 3
Summary
In this article, I discussed how we can add a tooltip to a control in Silverlight.