Partager via

How to add a tooltip (XAML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

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.

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

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

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

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.

Adding tooltips

Guidelines and checklist for tooltips

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++