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.
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.
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">