Tooltips are great additions to any interface and in this article I'm going to show you how to attach a tooltip to control in Silverlight 2.
To start, let's assume that we have a button that we want to add a tooltip to:
[XAML]
<UserControl x:Class="KeithRull.Silverlight.CreatingTooltips.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="#FF1E238E">
<Button Content="Hover over me!"
Height="20"
Width="100" Margin="30 40"
VerticalAlignment="Top"
HorizontalAlignment="Left">
</Button>
</Grid>
</UserControl>
[Rendered UI]
In order or us to attach a tooltip to our button we need to create a reference to the TooltipService.Tooltip inside the our button's XAML declaration. We also need to setup the Tooltip.Content to tell the compiler what to show when the user hover's to our button.
[XAML]
<UserControl x:Class="KeithRull.Silverlight.CreatingTooltips.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="#FF1E238E">
<Button Content="Hover over me!"
Height="20"
Width="100" Margin="30 40"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<ToolTipService.ToolTip>
<ToolTip>
<ToolTip.Content>
<TextBlock TextWrapping="Wrap">
Hooray! I'm alive!.
</TextBlock>
</ToolTip.Content>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
</Grid>
</UserControl>
[Rendered UI (at runtime)]
The message "Hooray! I'm alive!" appeared when the user hovers over our button. We can also cutomize how our tooltip appears by adding more XAML elements in the Tooltip.Content property.
[XAML]
<UserControl x:Class="KeithRull.Silverlight.CreatingTooltips.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="#FF1E238E">
<Button Content="Hover over me!"
Height="20"
Width="100" Margin="30 40"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<ToolTipService.ToolTip>
<ToolTip Background="#FFFFFF" Width="150">
<ToolTip.Content>
<StackPanel>
<Image Source="images/silverlight.png" />
<TextBlock HorizontalAlignment="Right">
It rocks like a champ!
</TextBlock>
</StackPanel>
</ToolTip.Content>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
</Grid>
</UserControl>
[Rendered UI (at runtime)]
Another customization that you might want to do is specifying the HorizontalOffset and the VerticalOffset. This allows you to specify where the tooltip will appear in reference to your target control.