If you have a FrameworkElement such as an Image, Button, TextBlock, etc. you can add a tooltip directly to the element. Tooltips are usually small, boxed text that popup when a user hovers over the control. The purpose of the tooltip is to tell the user what the control does.

For example, let’s say you have a toolbar built from a stack panel of images:

<StackPanel Orientation="Horizontal"> 

    <Image Source="draw.png" /> 

    <Image Source="paint.png" /> <Image Source="font.png" /> 

    <Image Source="dopper.png" /> <Image Source="erase.png" /> 

</StackPanel> 

To add a tooltip just set the control property TooltipService.Tooltip = “<your tooltip">. For example:

<Image Source="draw.png" ToolTipService.ToolTip="Draw"> 

The tooltip does not have to be set to text, it can be set to any object you want it to be. For example, to make the tooltip an Image you would simply do this:

<Image Source="draw.png" Width="16" Height="16"> 

    <ToolTipService.ToolTip> 

        <Image Source="draw.png"></Image> 

    </ToolTipService.ToolTip> 

</Image> 

A tooltip can also be set programmatically for any of your controls. The following code demonstrates how to do this:

ToolTipService.SetToolTip(YourControl, "Your New Tooltip");

Setting Tooltip.Placement allows you to control where you want the tooltip to popup in relation to the control you are hovering over. These options are:

1. Mouse – Where the mouse tip is.
2. Left – Left edge of the control
3. Bottom – Bottom of the control.
4. Right – Right edge of the control
5. Top – Top of the control

The following demo shows the positioning in order listed above.

[silverlight: Tip20_Tooltips.xap]

Thank you,

–Mike