Tool Tips in Silverlight


Silverlight ToolTip Control

A ToolTip is a pop-up window that displays some information in a small window. The ToolTip class in .NET 3.5 represents a ToolTip. This article demonstrates how to create and use a ToolTip control by using XAML and C#.

Creating a ToolTip

The ToolTip element represents a ToolTip control in XAML.

 

<ToolTip/>

 

The IsOpen property represents if a ToolTip is visible or not. The HorizontalOffset and VerticalOffset properties represent the horizontal and vertical distance between the target control and the pop-up window. The Content property represents the contents of the ToolTip.

 

The code snippet in Listing 1 creates a ToolTip control and sets the horizontal offset, vertical offse and content of a ToolTip control.

 

<ToolTip Content="Hello! I am a ToolTip."

HorizontalOffset="10" VerticalOffset="20"/>

Listing 1

The output looks like Figure 1.

Figure 1

ToolTip Service

To display a tooltip for a control, the ToolTipService class must be used. The SetToolTip and GetToolTip static methods are used to set and get the tooltip of a control.

The following code snippet creates a ToolTipService.ToolTip for a control.

<ToolTipService.ToolTip >

    <ToolTip Content="Hello! I am a ToolTip."

    HorizontalOffset="10" VerticalOffset="20"/>

</ToolTipService.ToolTip>

Listing 2

The code snippet in Listing 3 sets a ToolTip of a Button control.

<Button Content="Mouse over me" Width="150" Height="30"

        Canvas.Top="10" Canvas.Left="10">

    <ToolTipService.ToolTip >

        <ToolTip Content="Hello! I am a ToolTip."

        HorizontalOffset="10" VerticalOffset="20"/>

    </ToolTipService.ToolTip>

</Button>

Listing 3

The new if you run the application and mouse over the button control, the output looks like Figure 2.

Figure 2

Creating a Fancy Tooltip

The ToolTip content can be any control and multiple controls. The code snippet in Listing 4 creates a ToolTip with an image and text in it.

<!-- Create a button -->

<Button Content="Mouse over me" Width="150" Height="30"

        Canvas.Top="50" Canvas.Left="20">

    <!-- Create a tooltip by using the ToolTipService -->

    <ToolTipService.ToolTip >

        <ToolTip HorizontalOffset="0" VerticalOffset="0">

            <!-- Add a StackPanel to the tooltip content -->

            <StackPanel Width="250" Height="150">

                <!-- Add an image -->

                <StackPanel.Background>

                    <ImageBrush ImageSource="Garden.jpg"

                                Opacity="0.4"/>

                </StackPanel.Background>

                <!-- Add a text block -->

                <TextBlock >

                    <Run Text="This is a tooltip with an image and text"

                        FontFamily="Georgia" FontSize="14" Foreground="Blue"/>

                </TextBlock>

            </StackPanel>

        </ToolTip>

    </ToolTipService.ToolTip>

</Button>

Listing 4

The new tooltip looks like Figure 3.

Figure 3

Summary

In this article, I discussed how we can add a tooltip to a control in Silverlight.


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.