Reader Level:
Articles

Adding ToolTip to a UI Element in Windows Store Apps

By Gaurav Gupta on October 11, 2012
In this article we learn how to add a Tooltip to a control in Windows Store apps using C#/XAML.
  • 0
  • 0
  • 9472

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>

Add-Image-Tooltip-In-Windows-Store-App.jpg

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-ToolTip-In-Windows-Store-Apps.jpg

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.

Adding-Tooltip-in-Properties-In-Windows-Store-Apps.jpg

Summary

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

Gaurav Gupta

I am a student and Developer. I like to explore new technologies, mostly working on web development.

COMMENT USING

Trending up