Creating ToolTip in Silverlight

Introduction:

Silverlight has a flexible model for tooltips (those infamous yellow boxes that pop up when we hover over something interesting). Because tooltips in Silverlight are content controls, we can place virtually anything inside a tooltip.

So let us try creating a customized tooltip.

Step 1: Create a new Silverlight application and name is "ToolTip"

Step 2: Open main.xaml

Step 3: The simplest example is a text-only tooltip. We can create a text-only tooltip by setting theToolTipService.ToolTip property on another element,


<Grid x:Name="LayoutRoot">
        <Button ToolTipService.ToolTip="This is my tooltip"
                Margin="3" Padding="5" HorizontalAlignment="Center"
                 Width="200"  Height="30"               
                Content="I have a tooltip"></Button>
</Grid>

Press F5 and see the result;



Step 4: Now let us customize it.

If we want to supply more ambitious tooltip content, such as a combination of nested elements, we need to break the ToolTipService.ToolTip

  <Button Content="I have a fancy tooltip" Padding="10" Margin`="3" HorizontalAlignment="Center"
                 Width="200"  Height="40">
            <ToolTipService.ToolTip>
                <ToolTip Background="DarkRed" Foreground="White">
                    <StackPanel>
                        <TextBlock Margin="3" Text="Image and text"></TextBlock>
                        <Image Source="happyface.jpg"></Image>
                        <TextBlock Margin="3" Text="Image and text"></TextBlock>
                    </StackPanel>
                </ToolTip>
            </ToolTipService.ToolTip>
        </Button>

If you give name to you tooltip, then from code behind we can control its behavior like IsEnabled or disable.

Hope you liked this basic introduction to tooltip.

Cheers.