.NET 4.0+

WPF Information Controls - ToolTip

by Richard Carr, published at http://www.blackwasp.co.uk/ToolTip.aspx

The forty-fourth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF information controls. This instalment looks at the ToolTip control, which enhances tool tips for FrameworkElements.

ToolTip

Many Windows-based programs use tool tips to help the user to learn the purpose of all of the controls. Tool tips are usually small rectangles that appear when the user hovers the mouse pointer over a control. Generally the rectangle contains a short piece of text describing the control. Once displayed, the tips disappear when the user moves the mouse pointer away from the linked control or clicks a mouse button, or after a short delay.

We've already seen how you can add tool tips to any control that implements FrameworkElement. This class includes the ToolTip property. Setting the value of this property to a string defines the text of the tool tip that is displayed when the mouse moves over the control. You can also set the ToolTip property to any WPF control for richer user interfaces.

In addition to the ToolTip property, there is a ToolTip control. This control is designed to be attached to the ToolTip property of the FrameworkElement type. It provides additional configuration options over the basic property.

To demonstrate we need a sample program. Create a new WPF application project in Visual Studio, naming the new solution, "ToolTipDemo". Once the project is ready, replace the XAML in the main window with the following:

<Window x:Class="ToolTipDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTip Demo"
        Height="200"
        Width="250">
    <StackPanel Margin="10">
        <Label Content="User" />
        <TextBox/>
        <Label Content="Password"/>
        <PasswordBox/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="60">
            <Button Content="OK"
                    Width="85"
                    VerticalAlignment="Center"
                    Margin="0 0 10 0"
                    ToolTip="Login with the entered credentials"/>
            <Button Content="Cancel"
                    Width="85"
                    VerticalAlignment="Center"
                    ToolTip="Cancel the login and exit" />
        </StackPanel>
    </StackPanel>
</Window>

The above XAML is similar to that of the FrameworkElement article. It defines two tool tips for the two Button controls. Each uses plain text. Try running the program and hovering the mouse pointer over the buttons to see the results. When you position the pointer over the OK button, the result should be similar to the image shown below:

NB: Try moving the mouse pointer over one of the buttons and leaving it stationary for a few seconds to see that the tool tip is hidden automatically.

Using the ToolTip Control

The ToolTip control is designed to be used as the value for the FrameworkElement's ToolTip property. It cannot be used as a standalone control. In essence, it adds a wrapper to the content of the ToolTip property, providing additional features. ToolTip inherits functionality from ContentControl. This means that it can contain text, other values or WPF controls.

To add a ToolTip you must use property element syntax. You can see this in the XAML below, where the ToolTip values are held within Button.ToolTip tags. In this case, the replacement XAML for the two buttons defines tool tips that contain plain text.

<Button Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0">
    <Button.ToolTip>
        <ToolTip>Login with the entered credentials</ToolTip>
    </Button.ToolTip>
</Button>
<Button Content="Cancel"
        Width="85"
        VerticalAlignment="Center">
    <Button.ToolTip>
        <ToolTip>Cancel the login and exit</ToolTip>
    </Button.ToolTip>
</Button>

Run the program and move the mouse pointer over the buttons to see the results. You should see that the tool tips are identical to those in the first example.