How to add a tooltip (XAML)

This tutorial walks you through the steps to add a tooltip to a UI element in a Windows Store app using C++, C#, or Visual Basic.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Runtime apps using C# or Visual Basic
• Roadmap for Windows Runtime apps using C++

What you need to know

Technologies

• ToolTip
• ToolTipService

Prerequisites

• We assume that you can add controls to a basic Windows Store app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

Instructions

Step 1: Add a tooltip in XAML

You typically add a tooltip to a UI element in the Extensible Application Markup Language (XAML) editor or using a design tool like Blend for Visual Studio. You can also add a tooltip in code at runtime. Tooltip content can be simple text, an image, or a panel that holds embedded text, images, or controls.

To add a text tooltip in XAML

1. Select the element to associate the ToolTip with.
2. Set the ToolTipService.ToolTip attached property to associate the ToolTip with the UIElement.

   Here's a button styled with a back arrow. The tooltip is set to the string, "Back".

   XAML

   Copy

   
   <Button Style="{StaticResource BackButtonStyle}" ToolTipService.ToolTip="Back" />
   
   

To add an image tooltip in XAML

1. Select the element to associate the ToolTip with.
2. Using XAML property element syntax, set the ToolTipService.ToolTip attached property to associate the ToolTip with the UIElement.
3. Add an Image element as the ToolTip content.

   Here's a TextBlock that shows the text, "small logo". The tooltip is set to an image of the SmallLogo.png asset.

   XAML

   Copy

   
   <TextBlock Text="small logo">
       <ToolTipService.ToolTip>
           <Image Source="Assets/SmallLogo.png"/>
       </ToolTipService.ToolTip>
   </TextBlock> 
   
   

Step 2: Add a tooltip in code

To add a text tooltip in code

1. Create a new ToolTip.
2. Set the ToolTip Content property to a string value.
3. Use the ToolTipService.SetToolTip static method to associate the ToolTip with a UIElement.

   Here's how to add a tooltip to a ToggleSwitch in code. The ToggleSwitch is defined in XAML and named onOffSwitch so you can refer to it in code.

   XAML

   Copy

   
   <ToggleSwitch x:Name="onOffSwitch" OnContent="On" OffContent="Off" Toggled="onOffSwitch_Toggled"/>
   
   

   In code, a new ToolTip is created and associated with the ToggleSwitch using the ToolTipService.SetToolTip method.

   C#

   Copy

   
               ToolTip toolTip = new ToolTip();
               toolTip.Content = "Flip switch to turn on.";
               ToolTipService.SetToolTip(onOffSwitch, toolTip);
   
   

Step 3: Add a tooltip using a design tool

To add a text tooltip using a design tool

1. On the design surface, select the element to associate the ToolTip with.
2. Type the tooltip content string into the ToolTip property text box. If the Properties pane is arranged by Category, the ToolTip property is in the Common category.

Related topics

Adding tooltips

Guidelines and checklist for tooltips

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++