Thursday, August 7, 2008

How to create a tooltip with customized style

Tooltip is a very useful tool to provide brief information about an object (usually during mouse hover action) in a web application and Silverlight is flexible enough to let you customized its style. In my case, I am using it on image button.

clip_image002

By looking at 3 image button above, you may not understand where the buttons will lead you to. Thus, if you are using tooltip, you will know the information about the image button. For example, above image shown a mouse hover action on a “mail-like” icon, and tooltip appeared and shows “Contacts”.

XAML

<Button Height="Auto" Width="Auto" Content="Contact" Margin="10,0,10,0" x:Name="Contact" Template="{StaticResource LeftHeader_Top_Contact}" Cursor="Hand" Click="Contact_Click" >
<ToolTipService.ToolTip>
<TextBlock Height="Auto" Width="Auto" Text="Contacts" TextWrapping="Wrap" Style="{StaticResource ToolTipStyle}"/>
</ToolTipService.ToolTip>
</Button>



Above code shown inheriting a style from a StaticResource named TooltipStyle. To create a Page level style:



<UserControl.Resources>
<Style x:Key="ToolTipStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="#FF9A9898" />
<Setter Property="FontSize" Value="10"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="FontFamily" Value="Times New Roman"/>
</Style>


1 comment:

bradutz01 said...

At www.xamltemplates.net you can download styles for all the controls and also for tooltip.