Tutorials » Silverlight tutorials »

Display Tooltip for Silverlight controls


This chapter explains how to display tool tips for Silverlight controls using ToolTipService class.


Silverlight offers a class called "ToolTipService" which can be used to display tooltips for Silverlight controls. This class can be attached to most of the UI elements in Silverlight to display tooltips.

Simple Tooltip text


The below sample code shows how to display a simple text tooltip for a Button control:

<Button Width="60" Height="20" Content="My Button">
<ToolTipService.ToolTip>
<ToolTip Content="This is tool tip for Button"></ToolTip>
</ToolTipService.ToolTip>
</Button>


See this example which sets a tooltip for a textbox control:

<TextBlock Width="60" Height="20" Text="My Text">
<ToolTipService.ToolTip>
<ToolTip Content="This is tool tip for TextBlock"></ToolTip>
</ToolTipService.ToolTip>
</TextBlock>


Display rich UI elements in tooltip


Silverlights ability to support UI elements in tooltip can be used to provide great user experience. We can use almost any UI element within a Tooltip. See various examples below.

Display image within a tooltip

This sample code shows how to display an image within a tooltip in Silverlight:

<TextBox Width="60" Height="20" Text="My Text">
<ToolTipService.ToolTip>
<Image Source="http://www.dotnetspider.com/images/spiderlogo.jpg" ></Image>
</ToolTipService.ToolTip>
</TextBox>


Tooltip for entire Silverlight control

You can set a tooltip for the entire Silverlight control. See the below sample code:

<UserControl x:Class="SilverlightToolTip.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">

<StackPanel x:Name="LayoutRoot" Background="White">
</StackPanel>

<ToolTipService.ToolTip>
<ToolTip Content="This is tool tip for entire control"></ToolTip>
</ToolTipService.ToolTip>

</UserControl>


Programmatically set Tooltip


You can set or change Tooltips from the code behind file. This example shows how to set a Tooltip for a button control from the code behind file:

ToolTipService.SetToolTip(MyButton, "This is new tooltip");




Next Chapter: How to play audio or sound files from Silverlight
Previous Chapter: How to show a popup layer within a Silverlight web page?
More Chapters: Silverlight Tutorials
More Tutorials: Tutorial Index



Top Contributors
Today
    Last 7 Daysmore...

    Awards & Gifts

    Online Members

    More...
     
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India