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 Information Controls - ToolTip

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.

Adding a Drop Shadow

In the image above you can see a drop shadow behind the tool tip, which gives a three-dimensional appearance. Recently there has been a movement to flat user interfaces, where such shadows are usually excluded. You can turn off the shadow using the HasDropShadow property. Set the property to true to show the shadow and false to hide it.

To demonstrate, replace the XAML for the two buttons with the code below. This shows the shadow on the OK button but hides it for the Cancel button.

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

Run the program and compare the two tool tips. Depending upon the operating system you are using and its configuration, you may find that drop shadows are never enabled. The image below shows the Cancel button's tool tip with no shadow.

WPF ToolTip with drop shadow removed

ToolTip Placement

It is possible to specify exactly where tool tip pop-ups should appear, placing them relative to any control or at specific screen co-ordinates. This is controlled with four properties. They are PlacementTarget, Placement, HorizontalOffset and VerticalOffset.

Alignment Placement

The first type of placement we'll consider is positioning the tooltip relative to a control using a simple alignment. Two of the four properties must be used. The PlacementTarget property uses a basic binding syntax and allows you to specify which control the tip will appear near. This need not be the control that the ToolTip is linked to.

The Placement property determines the position of the tool tip, using a value from the PlacementMode enumeration. There are five possible values for this type of placement:

  • Left. The tool tip appears directly to the left of the control specified by the PlacementTarget property. If there is not enough room in this position, the tool tip will be moved so that it is entirely visible.
  • Right. The tool tip will appear to the right of the specified control, using the same placement rules as Left.
  • Top. The tool tip will appear directly above the specified control, using the same placement rules as Left and Right.
  • Bottom. The tool tip will appear directly below the specified control, using the same placement rules as Left, Right and Top.
  • Center. The tool tip will be placed over the specified control, positioned centrally. As with the above options, it will be moved if it does not fit on the screen.

The following example XAML replaces the OK button's code. It places the tool tip directly above the button. Note how the binding syntax for the PlacementTarget property references the name of the button. This syntax will be explained later in the tutorial.

<Button Name="OKButton"
        Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0">
    <Button.ToolTip>
        <ToolTip PlacementTarget="{Binding ElementName=OKButton}"
                 Placement="Top">Login with the entered credentials</ToolTip>
    </Button.ToolTip>
</Button>

The updated tool tip appears as shown below:

WPF ToolTip with top placement

13 January 2014