How to Use a ToolTip in WPF

Introduction

Tool tips are used to help the users to learn the purpose of Controls in many Windows-based programs. Tooltips are nothing but small rectangles that appear when the user hovers the mouse pointer over the Control. 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.

Background

Here, I have used the ToolTip property of the Framework Element Class. 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.

Solution

I have defined two tool tips for the two Button controls. Each uses plain text. On running the program and hovering the mouse pointer over the buttons, you will see the result. The ToolTip control is used as the value for the Framework Element'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 the Content Control class. This means that it can contain text, other values or WPF controls.

Procedure

We have used Button.ToolTip tags within which ToolTip values are held. Run the program and hover the mouse pointer over the Buttons. 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.

Step 1

The following defines the ToolTip Tags for Button Controls using the Button.ToolTip property.

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

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

<Button Content="Cancel"

Width="85"

VerticalAlignment="Center">

<Button.ToolTip>

<ToolTip Placement="Mouse"

Opened="ToolTip_Opened"

Closed="ToolTip_Closed">Cancel the login and exit</ToolTip>

</Button.ToolTip>

</Button>

</StackPanel>

</Window>

Step 2

The following defines the color content when the we click the controls. The color changes from red to green after clicking on the buttons; in other words, after the closing of the tool tip events.

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace ToolTipArticle

{

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void ToolTip_Opened(object sender, RoutedEventArgs e)

{

Background = Brushes.Red;

}

private void ToolTip_Closed(object sender, RoutedEventArgs e)

{

Background = Brushes.Green;

}

Output

1. On running the application you will get this window.

to1

2. On hovering the mouse-pointer on the OK Button, a small rectangle appears having some text within it. This small rectangle has text describing the purpose of the OK The Button Control is known as a ToolTip. Also, while hovering the mouse pointer over the OK Button, the colour of the background changes to red.

3. After some time or a few seconds, the the Tooltip is closed, so the colour of the background automatically changes to green.

4. Similarly, on hovering the mouse-pointer on the Cancel Button, the ToolTip is again opened showing the purpose of the Cancel Button Control in text format.And while doing this, the background color again changes to red.

5. Again, after a few seconds the ToolTip rectangle of the Cancel button Control will be closed automatically, and the background colour will be changed to green.