Creating ToolTip in Silverlight

Introduction:

Silverlight has a flexible model for tooltips (those infamous yellow boxes that pop up when we hover over something interesting). Because tooltips in Silverlight are content controls, we can place virtually anything inside a tooltip.

So let us try creating a customized tooltip.

Step 1: Create a new Silverlight application and name is "ToolTip"

Step 2: Open main.xaml

Step 3: The simplest example is a text-only tooltip. We can create a text-only tooltip by setting theToolTipService.ToolTip property on another element,


<Grid x:Name="LayoutRoot">
<Button ToolTipService.ToolTip="This is my tooltip"
Margin="3" Padding="5" HorizontalAlignment="Center"
Width="200" Height="30"
Content="I have a tooltip"></Button>
</Grid>

Press F5 and see the result;



Step 4: Now let us customize it.

If we want to supply more ambitious tooltip content, such as a combination of nested elements, we need to break the ToolTipService.ToolTip

<Button Content="I have a fancy tooltip" Padding="10" Margin`="3" HorizontalAlignment="Center"
Width="200" Height="40">
<ToolTipService.ToolTip>
<ToolTip Background="DarkRed" Foreground="White">
<StackPanel>
<TextBlock Margin="3" Text="Image and text"></TextBlock>
<Image Source="happyface.jpg"></Image>
<TextBlock Margin="3" Text="Image and text"></TextBlock>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
</Button>

If you give name to you tooltip, then from code behind we can control its behavior like IsEnabled or disable.

Hope you liked this basic introduction to tooltip.

Cheers.