XAML Tooltip

This article shows how to use XAML Tooltip element.
  • 3511
The <Tooltip /> element represents a tooltip in XAML. A tooltip can be apply on a control using the Control.Tooltip element.

The following code applies a tooltip on a button control within the Button.Tooltip tag. Similarily, it can be applied on other controls.

 

<Window x:Class="FancyTooltip.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Grid>

        <Button Width="100" Height="30">Click Me

            <Button.ToolTip>

                <ToolTip>This is a tooltip test for a button control. You

                    can click me if you want but I will do nothing for you.

                </ToolTip>

            </Button.ToolTip>

        </Button>

        </Grid>

</Window>


The output looks like Figure 1.

TooltipImg1.gif 

Figure 1. Tooltip of a Button

Now, how about creating a fancy tooltip that looks like below? This below tooltip has an image, a title, and some text.

 FancyTooltipImg.jpg

The following code generates the above tooltip.


<Button Width="100" Height="30">Click Me

            <Button.ToolTip>

                <StackPanel Background="Honeydew" Height="200" Width="200">

                    <StackPanel Background="BurlyWood" Height="30" Width="200" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" >

                        <Image VerticalAlignment="Top"  Width="30" Height="30" Source="C:\Projects\XAML\FancyTooltip\FancyTooltip\samp.png" Name="image1" />

                        <TextBlock FontFamily="Aharoni" FontSize="24" FontWeight="Bold" Foreground="Black" TextWrapping="Wrap" VerticalAlignment="Top" Height="30" HorizontalAlignment="Right" Width="143">

                            <Run FontFamily="Andalus" FontSize="18" FontWeight="Normal" Text="Hello! Fancy Tip"/>

                        </TextBlock>

                    </StackPanel>                 

                    <StackPanel Width="200" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" >

                        <TextBlock TextWrapping="Wrap" Foreground="#FFF9F4F4" TextAlignment="Center" Background="{x:Null}" HorizontalAlignment="Right" VerticalAlignment="Top" Width="181" Height="98">

                          <Run FontFamily="Verdana" FontSize="11" FontWeight="Normal" Foreground="#FF151514"

                               Text="Format your tip the way you want and put any image, text or other controls on it.

                               Also, you can add more controls in this tip the way you want to format it."/>

                        </TextBlock>

                    </StackPanel>

                </StackPanel>

            </Button.ToolTip>

        </Button>


Show Duration

You can control how long a tooltip should be visible when the mouse is paused on a control. For example, if mouse is paused for 5 seconds on a button, you want the tooltip to disappear. You can set the ToolTipService.ShowDuration property of the Button control as following:

<Button ToolTipService="5000" Width="100" Height="30">

Show Tooltip for Disabled Items

By default a Tooltip is not visible for a disabled item but if you want to show the tooltip for a disabled item, you need to set ShowOnDisabled = true.

<Button ToolTipService.ShowOnDisabled="True" Width="100" Height="30">

Further Readings
 
You may also want to read these related articles.
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

 

 

 

 

© 2013 dotNetheaven. All rights reserved.