ToolTipService object is used to set a tool tip. To define a
tool tip to a Silverlight control element, it is necessary to attach
"ToolTipService.ToolTip" property to it. It can be done for any Silverlight
control element. This attached property should contain an object of type
ToolTip. This object will be displayed to a user as a result of hovering a
mouse cursor over a control element.
ToolTip object is a visual control element. It is an
inheritor of a ContentControl object and contains a number of properties that
allows us to manage an application appearance. In the simplest case a ToolTip
object can contain a base text in a TextBlock control element. To create such
pop-up tool tip it is necessary to do the following definition in XAML code.
Listing 1 - Simple definition of tool tip
<Button Content="Button">
<ToolTipService.ToolTip>
<ToolTip>
<TextBlock Text="Tooltip for Button control"/>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
In this example for the button there will be a simple tool
tip as is shown in a following picture.
Figure 1: Simple tool tip
In this case any value of tool tip properties is not set. Usage
of these properties helps to manage a tool tip appearance. For example, you can
enter a big length text and specify sizes of a tool tip. For these purposes
Width and Height properties are used. It is strongly recommended to define
these properties. If they are set, it is easy to understand sizes of a tool
tip. If width and height properties are not set, the runtime of Silverlight
specifies sizes of a tool tip depending on its content.
Listing 2 - Sizing of tool tip
<Button Content="Button">
<ToolTipService.ToolTip>
<ToolTip Width="150" Height="50">
<TextBlock Text="Tooltip for Button control. Tooltip for Button
control. Tooltip for Button control. Tooltip for Button
control" TextWrapping="Wrap"/>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
If values of width and height of a tool tip are set then a
control element is displayed in strictly set sizes and all other content is cut
off.
Figure 2: Tool tip with fixed size
Moreover, you can define a tool tip appearance. For example,
it is possible to set background color, font color, a font name and its size, a
thickness and color of a border, a transparency and other visual properties
which can essentially affect a tool tip appearance. A visual appearance of a
tool tip border can be defined too.
Listing 3 - Defining visual appearance of a border
for the tool tip
<Button Content="Button">
<ToolTipService.ToolTip>
<ToolTip Width="150" Height="50" Background="Gray" FontSize="8"
Foreground="White" Opacity="0.8"
BorderBrush="Red" BorderThickness="2">
<TextBlock
Text=" Tooltip for Button control. Tooltip for Button
control. Tooltip for Button control. Tooltip for
Button control" TextWrapping="Wrap"/>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
This definition of a tool tip for a control element looks
like this.
Figure 3: Tool tip with border
Also there is no necessity to use only a text in tool tips.
Actually, you can use any Silverlight control elements within a tool tip.
However, you should understand that usage of some control elements, such as a
button, textbox, etc., is not meaningful because a tool tip will be hidden as
soon as a user moves a mouse cursor (the user will not have the possibility to
work with these controls). However, you can place an image within a tool tip,
for example.
Listing 4 - Tool tip with image
<Button Content="Button">
<ToolTipService.ToolTip>
<ToolTip Width="150" Height="26" Background="Gray" FontSize="8"
Foreground="White" Opacity="0.8" BorderBrush="Red"
BorderThickness="2">
<StackPanel Orientation="Horizontal">
<Image Source="book.png" Width="16" Height="16"/>
<TextBlock Text="Some text." TextWrapping="Wrap"/>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
</Button>
Thus, this example will be displayed as follows.
Figure 4: Tool tip with image
Usage of the specified properties makes it possible to
change appearance of a tool tip essentially. In some situations more
significant changes of a tool tip appearance can be demanded. For this purpose
you should create a new tool tip template (ControlTemplate). For example,
creations of a tool tip with a non-standard form. For these purposes a Path
control can be used to draw your own form for a tool tip.
Listing 5 - Tool tip with custom form
<Button Content="Button">
<ToolTipService.ToolTip>
<ToolTip>
<ToolTip.Template>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Path Fill="Blue" Stretch="Fill" Stroke="#FF000000"
Margin="0" UseLayoutRounding="False" Data="M290,232 C255.65538,225.35266
230.24176,237 198,237 C198,237.66667 198,238.33333 198,239 C184.91988,239
147.17065,252.34129 162,282 C173.83936,305.67871 188.39276,311.26788 226,305
C242.90622,302.18228 258.14798,288.43201 277,301 C291.76587,310.8439
303.67093,309.80832 324,304 C333.82855,301.19183 350.48572,296.19049 356,287
C363.6926,284.80212 361.08459,285.57697 363,276 C364.26926,269.65378
368.23724,266.49304 360,262 C350.63977,256.89441 336.47565,259.85699 326,257
C315.53107,254.14484 294.14899,268.5047 289,256 C286.06909,248.88211
289.59357,249.43437 293,243 C297.50867,234.4836 291.76053,239.34572 290,232 z"/>
<ContentPresenter
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</ToolTip.Template>
<TextBlock Text="Some text"/>
</ToolTip>
</ToolTipService.ToolTip>
</Button>Defining a template, it is important to insert a
ContentPresenter control element to display contents of a tool tip.
Figure 5: Tool tip with custom template
A lot of different templates for tool tips can be set in
Silverlight.
An attentive look at all the previous examples makes it
clear to understand that the way to define a visual representation of a tool
tip directly at its description is not so convenient. It is much more
convenient to store templates and other visual options somewhere in a special
place and use them, when it is necessary. To do it you need to define a tool
tip style in resources of a form or in external resources which are connected
to an application.
Listing 6 - Defining style for the tool tip
<Style x:Key="TooltipStyle" TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border>
<Grid>
<Path Fill="Blue" Stretch="Fill"
Stroke="#FF000000" Margin="0" UseLayoutRounding="False" Data="M290,232
C255.65538,225.35266 230.24176,237 198,237 C198,237.66667 198,238.33333 198,239
C184.91988,239 147.17065,252.34129 162,282 C173.83936,305.67871
188.39276,311.26788 226,305 C242.90622,302.18228 258.14798,288.43201 277,301
C291.76587,310.8439 303.67093,309.80832 324,304 C333.82855,301.19183
350.48572,296.19049 356,287 C363.6926,284.80212 361.08459,285.57697 363,276
C364.26926,269.65378 368.23724,266.49304 360,262 C350.63977,256.89441
336.47565,259.85699 326,257 C315.53107,254.14484 294.14899,268.5047 289,256
C286.06909,248.88211 289.59357,249.43437 293,243 C297.50867,234.4836
291.76053,239.34572 290,232 z"/>
<ContentPresenter
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>After determining a style it can be used where necessary to
identify a tool tip. When the count of control elements is mass, a code can be
essentially reduced. Usage of the following code helps you.
Listing 7 - Defining style-based tool tip
<Button Content="Button">
<ToolTipService.ToolTip>
<ToolTip Style="{StaticResource TooltipStyle}">
<TextBlock Text="Some text"/>
</ToolTip>
</ToolTipService.ToolTip>
</Button>As you can see, it is easy and handy to modify a tool tip
appearance. Use a set of standard properties to do simple changes of
appearance. If there is a need to get more significant changes in a tool tip
appearance it is necessary to redefine a template of a tool tip.
