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;

tooltip1.gif

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>

tooltip2.gif

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.
 

Up Next
    Ebook Download
    View all
    Learn
    View all