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

Absolute and Relative Placement

Another way that you can position a tool tip is relative to the top-left corner of the screen, or the top-left corner of a control's bounding rectangle. To set these modes you use one of the following PlacementMode values:

• Absolute. The tool tip will be placed at screen co-ordinates defined by HorizontalOffset and VerticalOffset. If these co-ordinates cause the tool tip to extend beyond the confines of the screen, it will be repositioned to the screen edge. The PlacementTarget property has no effect when this mode is used.
• AbsolutePoint. Positions the tool tip in the same manner as Absolute. However, if the tool tip extends beyond the screen boundaries, the alignment of the tip is changed so that it is fully visible. This means that a different corner of the tool tip will be placed at the co-ordinates specified in HorizontalOffset and VerticalOffset.
• Relative. The tool tip will be placed at co-ordinates relative to the top-left corner of the control specified in PlacementTarget. The offset position is set with the HorizontalOffset and VerticalOffset properties. If the tool tip extends beyond the edge of the screen, it is repositioned to the screen edge.
• RelativePoint. Positions the tool tip in the same manner as Relative. If the tool tip does not fit on the screen, its alignment is changed.

The following example shows the tool tip for the OK button near the top-left of the screen.

<Button Name="OKButton"
        Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0">
    <Button.ToolTip>
        <ToolTip Placement="Absolute"
                 HorizontalOffset="10"
                 VerticalOffset="10">Login with the entered credentials</ToolTip>
    </Button.ToolTip>
</Button>

Mouse Placement

The final two options position the tool tip relative to the mouse pointer position when the tip is invoked. There are two options:

• Mouse. Places the tool tip at the bottom-right of the bounding box of the mouse pointer. If the tip extends off-screen, it is moved to the edge of the screen.
• MousePoint. Positions the tool tip in the same manner as with Mouse, changing the orientation of the tip if it would cross a screen boundary.

The following example uses the Mouse option:

<Button Name="OKButton"
        Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0">
    <Button.ToolTip>
        <ToolTip Placement="Mouse">Login with the entered credentials</ToolTip>
    </Button.ToolTip>
</Button>

Run the program and move the pointer over the OK button to see the result. The tool tip should appear as shown below:

ToolTip Events

The ToolTip class provides two events that can be useful. Opened is raised when a tool tip is displayed. Closed is raised when the tool tip disappears, either because the user moved the mouse or clicked, or because the time out period for the tip expired and it vanished automatically.

Let's demonstrate the two events with a simple example. First, modify the XAML for the OK button to register the two events:

<Button Name="OKButton"
        Content="OK"
        Width="85"
        VerticalAlignment="Center"
        Margin="0 0 10 0">
    <Button.ToolTip>
        <ToolTip Placement="Mouse"
                 Opened="ToolTip_Opened"
                 Closed="ToolTip_Closed">Login with the entered credentials</ToolTip>
    </Button.ToolTip>
</Button>

You can now add code for the events behind the window. The following two methods set the background colour of the window to red when the tool tip opens and green when it closes.

private void ToolTip_Opened(object sender, RoutedEventArgs e)
{
    Background = Brushes.Red;
}

private void ToolTip_Closed(object sender, RoutedEventArgs e)
{
    Background = Brushes.Green;
}