How to add a tooltip (XAML)

Applies to Windows only

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:

What you need to know

Technologies

Prerequisites

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.

Hh868199.wedge(en-us,WIN.10).gifTo 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".

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

Hh868199.wedge(en-us,WIN.10).gifTo 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.

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

Step 2: Add a tooltip in code

Hh868199.wedge(en-us,WIN.10).gifTo 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.

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

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

Step 3: Add a tooltip using a design tool

Hh868199.wedge(en-us,WIN.10).gifTo 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++

 

 

Show:
© 2015 Microsoft