(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .
        Why Register?

Using the ToolTip control in Silverlight

Submit Article
(4 votes)
Martin Mihaylov
>
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
7 comments   /   posted on Jun 09, 2008
Tags:   tooltip , martin-mihaylov
Categories:   Controls

This article is compatible with the latest version of Silverlight. 

New information about the tooltip can be found here.

Introduction

The theme of this article is the ToolTip control. It can be very useful as it enhances our application’s user interface.

Using the ToolTip Control

The ToolTipService class must be used along with the ToolTip control in order to display a tooltip to our control.  For the example I will use an image control, but the following can be applied to each of the controls. Here is the code:

<Image Source="GiantSeaTurtle.jpg" Width="400" Height="300">

<ToolTipService.ToolTip>

<ToolTip Content="Turtle"></ToolTip>

</ToolTipService.ToolTip>

</Image>

And it works:

 

The ToolTip control also provides some formatting properties such as Background, FontSize, FontWeight, Foreground etc.  The VerticalOffset and HorizontalOffset adjust the position of the tooltip in relation to the mouse. Here is an example:

<Image Source="GiantSeaTurtle.jpg" Width="400" Height="300" >

      <ToolTipService.ToolTip>

            <ToolTip Content="Turtle" FontWeight="Bold" VerticalOffset="10"
                 HorizontalOffset="10" >

                 <ToolTip.Background>

                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                            <GradientStop Color="White"
                                 Offset="0"></GradientStop>

                            <GradientStop Color="DarkCyan"
                                 Offset="0.8"></GradientStop>

                        </LinearGradientBrush>

                 </ToolTip.Background>

            </ToolTip>

      </ToolTipService.ToolTip>

</Image>

 

Another very important thing about the ToolTip control is that it doesn’t receive focus. Also when I tried to put a Button in the content of the ToolTip control the Click event was not raised and the button animation froze. I don’t know whether these two things are related, but if you want to add some interactivity to your tooltip keep them in mind.

Here is a live demo of using the ToolTip control with Image control nested in it.

 

 

<Image x:Name="turtle" Source="GiantSeaTurtle.jpg" Width="400" Height="300">

<ToolTipService.ToolTip>

<ToolTip>

<ToolTip.Content>

<Image Source="GiantSeaTurtle.jpg" Width="80"
                         Height="60"></Image>

</ToolTip.Content>

</ToolTip>

</ToolTipService.ToolTip>

</Image>

 

FAQ

·         How can I attach a tooltip to my control?
A tooltip can be attached using the ToolTip attached property of the ToolTipService class and the ToolTip control.

·         Can I nest other controls in the ToolTip control?
Consider the ToolTip control as a panel – you can put other controls in it (stack panel, images, text blocks etc.).

·         Can I format the content of the ToolTip control?
Yes, you can. The ToolTip Control provides properties for text formatting and background modifying (Background, Foreground, FontFamily, FontSize etc.).

·         Can I nest a Button in the ToolTip control and use its Click event?
As far as I tried – no. The Click event is not raised and the animation freezes on button down. This applies not only to the Button controls and their Click event, but to the other controls too. I recommend using static controls such as the Image control, the StackPanel, the TextBlock and etc. when nesting something in the ToolTip control.

 

Summary

Now it’s clear how to use the ToolTipService. You may consider the ToolTipService to be beneficial for your application, because, as we saw, it provides numerous styling options thanks to the ToolTip control and enhances the UI of our Silverlight application.

Conclusion

This article is just a brief tutorial that includes the key features of the ToolTip control. It targets the developer who has just started with the Silverlight controls. Any comments are welcome.


Subscribe

Comments

  • -_-

    RE: Using the ToolTip control in Silverlight 2


    posted by brij on Jun 11, 2008 03:51

    hi,

    is it possible to load a tooltip content, through a webservice, if and only if someone hovers over the image; say we are trying to get some data on the mousemove over a datagrid rows, there migth be 10000 rows, and we are intrstd in getting the tooltip content on the fly.

    regards

     

  • emil

    RE: Using the ToolTip control in Silverlight 2


    posted by emil on Jun 11, 2008 04:46

    Hi brij,

    Yes, it is possible and actually it is pretty easy. Lets take the example from the article. Instead of an Image control in the ToolTip.Content you can put a TextBlock element and create an event handler for its Loaded event. In the event handler you can make the call the web service to get the data you want to display. To get the idea see the example below:

    <Image x:Name="turtle" Source="GiantSeaTurtle.jpg" 
    	Width="400" Height="300">
    <ToolTipService.ToolTip>
        <ToolTip>
            <ToolTip.Content>
                <TextBlock Loaded="toolTip_Loaded"></TextBlock>
            </ToolTip.Content>
        </ToolTip>
    </ToolTipService.ToolTip>
</Image>
    Code behind

    private void toolTip_Loaded( object sender, RoutedEventArgs e )
{
    // call the web service to get the desired data            
    string data = "data received from the web service";
    ( ( TextBlock )sender ).Text = data;
}
    
    

    The Loaded event will be fired exactly when the ToolTip 
    has to be shown (i.e. when the mouse is over the control).
    

    Hope this helps
  • emil

    RE: Using the ToolTip control in Silverlight 2


    posted by emil on Jun 11, 2008 05:07
    Brij,

    check this Silverlight example also: (hover over to get the tooltip)

    Download the source code here

  • -_-

    RE: Using the ToolTip control in Silverlight 2


    posted by Parimal on Jun 11, 2008 13:47

    How can i use the Tooltip style mentioned in App.xaml file to set the style for the tooltip programatically?

    I defined following in App.xaml file:


    <Style x:Key="TooltipFormat" TargetType="ToolTip">
        <Setter Property="Foreground" Value="Red"></Setter>
    </Style>


    In the code file i am accessing the style in following way but i get parser error:

    TextBlock

     objToolTip = new TextBlock();

    objToolTip.Text = reader.GetAttribute(

    objToolTip.TextWrapping =

    objToolTip.HorizontalAlignment =

    objToolTip.Width = 200;

     

    "toolTip");TextWrapping.Wrap;HorizontalAlignment.Left;ToolTipService.SetToolTip(txtCategory, objToolTip);

     

     

     

     

     Parimal



  • -_-

    RE: Using the ToolTip control in Silverlight 2


    posted by Aki on Jul 14, 2009 04:14
    is there any source code for tooltips which displays data retrieved from database?
  • -_-

    RE: Using the ToolTip control in Silverlight 2


    posted by jh on Mar 11, 2010 12:29
    hey how to change the tool tip at the run time.. means when i checked the radio button accordingly the tooltip will be change.(in silverlight)
  • -_-

    RE: Using the ToolTip control in Silverlight 2


    posted by Experts Comment on Sep 28, 2010 01:17

    To add tooltip to datagrid column header we need to create DataGridTemplateColumn. Inside it we can provide the set to TooltipService.Tooltip.

    Below link provide good explanation about the same and also solution for resolving the problem of sorting not working.

    http://www.a2zmenu.com/Silverlight/%20Add-Tooltip-to-DataGrid-Column-Header%20.aspx

Add Comment

Login to comment:
  *      *       
Forgotten Password? Registration Why register?