Adding ToolTip to a UI Element in Windows Store Apps

Today we are going to learn about Tooltips in Windows Store Apps. A Tooltip is associated with controls to explain the information about the control with a short description, either in text or in another format such as an image. We can link a Tooltip to other controls.

Sometimes a Tooltip provides information to the user to understand the control that is not described properly in the UI. The main specialty of the Tooltip is that, it will dispaly automatticaly when the user hovers the mouse over the control; the tooltip automatically disappears when the user moves the mouse pointer away from the control.

The best use of a ToolTip is to reveal more information about a control before asking the user to perform an action. For example: To validate a control we can use the Tooltip for the control, showing a preview of the linked website when users touch a hyperlink etc.

We can add a Tooltip to a control element in one of 3 ways:

1. Using XAML.
2. Through code-behind.
3. Using a design tool.

In the later section we will see all ways to add a tooltip to a control with an example.

Adding a tooltip in XAML to button.

In this example I will add a simple image as a Tooltip to a button in XAML. To add a Tooltip, set the ToolTipService.ToolTip property to the associated UIElement.

<Button x:Name="button" Content="Image ToolTip" HorizontalAlignment="Center">

  <ToolTipService.ToolTip>

      <Image Source="logo.png"/>

  </ToolTipService.ToolTip>

</Button>



Adding a Tooltip in Code.

Step 1

Create an object of the new Tooltip using the Tooltip class.

ToolTip toolTip = new ToolTip();

                     
Step 2

Set the content of the Tooltip that you want to display when it appears.

toolTip.Content = "Exmaple of Text ToolTip";

Step 3

Associate the Tooltip object with the UI element using the SetToolTip method. It will take two arguments; first the Control name and the second is the Toolitp object.

ToolTipService.SetToolTip(button, toolTip);



Adding a Tooltip using Design tool or Property window.

Step 1

Select the element from the design view on which you want to add a tooltip.

Step 2

Go to the Properties window of the element by pressing the F4 key or from the view menu.

Step 3

Select the Common Category from the Properties window and type the text into the ToolTip.ToolTipService Textbox.



Summary

So, in this article we learned to add a tooltip to a UI element in a Windows Store app using C#/XAML.