Reader Level:
ARTICLE

Creating Fancy Tooltips in WPF

Posted by Mahesh Chand Articles | XAML July 14, 2008
Each control in WPF has a Tooltip property that can be accessed through XAML or code behind. This article shows how to create a fancy tooltip in XAML and WPF.
  • 0
  • 0
  • 72650
Download Files:
 

Each control in WPF has a Tooltip property that can be accessed through XAML or code behind. The Tooltip property can host any kind of controls such as a rectangle, text block, or a panel. In other words, we can display another window with any number of controls as a tooltip of a control.

The following code creates a simple tooltip for a button control.

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

 

The output looks like Figure 1.

Figure 1. A simple Tooltip

As I said earlier, a Tooltip can host any number of controls. For example, in the below code, a button tooltip hosts a StackPanel with two children StackPanels. First StackPanel hosts an image and a text block and second StackPanel hosts a larger textblock. The output looks like Figure 2, which is a fancy 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>

Figure 2. A fancy tooltip

Using this approach, you may design your tooltips the way you want.

Note: In the above code, you may want to change the source of the image file by changing the following code:  Source="C:\Projects\XAML\FancyTooltip\FancyTooltip\samp.png"

Article Extensions
Contents added by Developer Sahrepoint on Feb 24, 2012
Download File: ED.zip
Contents added by fluid_u_m on Dec 20, 2010
Use
ToolTipService.ShowDuration

to change the show duration
Contents added by matsolof on Sep 29, 2010
Very useful! Is there a way to keep the tooltip from disappearing very quickly? I have experimented a little but not found a solution yet.
COMMENT USING

Trending up