Skip to content

Latest commit

 

History

History
118 lines (78 loc) · 6.2 KB

tooltip.md

File metadata and controls

118 lines (78 loc) · 6.2 KB
-api-id -api-type
T:Windows.UI.Xaml.Controls.ToolTip
winrt class

Windows.UI.Xaml.Controls.ToolTip

-description

Represents a pop-up window for displaying information about an element in the UI.

-xaml-syntax

<ToolTip .../>
-or-
<ToolTip ...>
  singleObject
</ToolTip ...>
-or-
<ToolTip ...>stringContent</ToolTip>

-remarks

A tooltip is a popup that contains additional information about another control or object. Tooltips display automatically when the user moves focus to, presses and holds, or hovers the pointer over the associated control. The tooltip disappears when the user moves focus from, stops pressing on, or stops hovering the pointer over the associated control (unless the pointer is moving towards the tooltip).

Note

Starting with Windows 11 version 21H2, a tooltip can also be dismissed by pressing the CTRL key.

Here's a ToolTip for a Button.

Tool tip control

For design guidelines, see Guidelines for tooltips.

Usage

A ToolTip must be assigned to another UI element that is its owner. The ToolTipService class provides static methods to display a ToolTip.

<Button Content="Submit" ToolTipService.ToolTip="Click to submit"/>
<Button x:Name="submitButton" Content="Submit"/>
ToolTip toolTip = new ToolTip();
toolTip.Content = "Click to submit";
ToolTipService.SetToolTip(submitButton, toolTip);

You can use any object as the Content of a ToolTip. Here's an example of using an Image in a ToolTip.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Placement

By default, a ToolTip is displayed centered above the pointer. The placement is not constrained by the app window, so the ToolTip might be displayed partially or completely outside of the app window bounds.

If a ToolTip obscures the content it is referring to, you can adjust its placement. Use the Placement property or ToolTipService.Placement attached property to place the ToolTip above, below, left, or right of the pointer. You can set the VerticalOffset and HorizontalOffset properties to change the distance between the pointer and the ToolTip.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available locally with the SDK or NuGet package installation.

  • WinUI Styles (recommended): For updated styles from WinUI, see \Users\<username>\.nuget\packages\microsoft.ui.xaml\<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml.
  • Non-WinUI styles: For built-in styles, see %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic\generic.xaml.

Locations might be different if you customized the installation. Styles and resources from different versions of the SDK might have different values.

XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article. Light-weight styling resources are available starting in Windows 10, version 1607 (SDK 14393).

Notes for previous versions

Windows 8.x ToolTip is intended only for use in Windows. The ToolTip type is available in Windows Phone projects for compatibility with universal project templates, but the ToolTip is not shown in the Windows Phone UI.

ToolTip is displayed only within the bounds of the app window. It's placement might be adjusted to stay within those bounds.

Version history

Windows version SDK version Value added
1809 17763 PlacementRect

-examples

Tip

For more info, design guidance, and code examples, see Tooltip.

[!div class="nextstepaction"] Open the WinUI 2 Gallery app and see the Tooltip in action

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

This example demonstrates basic tooltips and the properties for placement.

[!code-xaml1]

-see-also

ContentControl, ToolTipService, Tooltips overview, XAML essential controls sample