BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Base Classes - FrameworkElement - Tool Tips

The twenty-seventh part of the Windows Presentation Foundation Fundamentals tutorial continues to describe the FrameworkElement type. This instalment describes some of the properties that control the display of tool tips.

Enhancing Tool Tips

As you might expect with WPF, a tool tip is not restricted to plain text. You can create tool tips that include formatted text, images and even video or three-dimensional models. In this article we won't go as far as video but we will create a more interesting tip than in the first example.

The ToolTip property is similar to the Header property of the Expander or GroupBox controls, in that it can be defined using plain text or property element syntax. With the latter, you can use any WPF control as the content of the tool tip. Only a single control may be used but this can be a layout control with multiple children.

To demonstrate, replace the XAML for the OK button with that shown below. Here we are using a StackPanel for the tool tip. The panel contains two Labels, with different formatting, to describe the button's function.

<Button Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0">
    <Button.ToolTip>
        <StackPanel>
            <Label FontWeight="Bold">Log in</Label>
            <Label>Login with the entered credentials</Label>
        </StackPanel>
    </Button.ToolTip>
</Button>

Try running the program and viewing the tool tip. It should appear as shown below.

FrameworkElement Complex ToolTip

ToolTipService Class

Tool tips can be controlled further using the ToolTipService class, which is defined in System.Windows.Controls namespace. Although the class is not strictly linked to FrameworkElement, the attached properties that it provides can be used to modify tool tip behaviour and styling.

Tool Tip Positioning Properties

Two useful properties are HorizontalOffset and VerticalOffset. These allow you to specify the position at which the tool tip will be displayed, relative to the standard location. A positive HorizontalOffset moves the tooltip to the right and a negative value moves it to the left. Similarly, you can move the tip upwards with a negative VerticalOffset or downwards with a positive value. You can use a simple number for each property or include a sizing unit, as described in the original FrameworkElement article.

Replace the Cancel button's XAML with that shown in the sample code below. This moves the button upwards by half an inch (48 pixels) and by ten pixels to the right of the normal position. Note the use of the attached property syntax, which includes the name of the class that provides the property as well as the property name itself.

<Button Content="Cancel"
        Width="85"
        VerticalAlignment="Center"
        ToolTip="Cancel the login and exit"
        ToolTipService.HorizontalOffset="10"
        ToolTipService.VerticalOffset="-0.5in"/>

Tool Tip Shadows

By default, tool tips include a drop shadow. This gives the impression that the tip is raised above the user interface, appearing closer to the user. For some complex tool tips the shadow effect does not work well and you may wish to remove it. To do so, you can set the Boolean HasDropShadow property to false.

Try updating the Cancel button's XAML as follows. Run the program again and compare the tool tips of the two buttons to see that the updated tip no longer has a shadow.

<Button Content="Cancel"
        Width="85"
        VerticalAlignment="Center"
        ToolTip="Cancel the login and exit"
        ToolTipService.HorizontalOffset="10"
        ToolTipService.VerticalOffset="-0.5in"
        ToolTipService.HasDropShadow="False"/>

Tool Tip Timing

Two ToolTipService properties allow you to control the timing of the display and removal of tool tips. InitialShowDelay specifies the time between the mouse pointer hovering over a control and the tool tip appearing. The value provided is the duration of the delay in milliseconds. ShowDuration, also in milliseconds, determines how long the tool tip will be visible if the cursor is not moved away from the control.

The following updated Cancel button XAML sets the initial delay to two seconds. The tool tip will remain visible for three seconds, or until the mouse pointer is moved away from the control.

<Button Content="Cancel"
        Width="85"
        VerticalAlignment="Center"
        ToolTip="Cancel the login and exit"
        ToolTipService.HorizontalOffset="10"
        ToolTipService.VerticalOffset="-0.5in"
        ToolTipService.HasDropShadow="False"
        ToolTipService.InitialShowDelay="2000"
        ToolTipService.ShowDuration="3000"/>
18 September 2013