Tool​Tip Tool​Tip Tool​Tip Tool​Tip Class

Definition

Represents a control that creates a pop-up window that displays information for an element in the UI.

public : class ToolTip : ContentControl, IToolTippublic class ToolTip : ContentControl, IToolTipPublic Class ToolTip Inherits ContentControl Implements IToolTip// This API is not available in Javascript.
<ToolTip .../>
-or-
<ToolTip ...>
  singleObject
</ToolTip ...>
-or-
<ToolTip ...>stringContent</ToolTip>
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

This example demonstrates basic tooltips and the properties for placement.

<!-- A button with a simple ToolTip. -->
<Button Content="Button with a simple ToolTip." 
        ToolTipService.ToolTip="Simple ToolTip" />

<!-- A TextBlock with an offset ToolTip. -->
<TextBlock Text="TextBlock with an offset ToolTip.">
    <ToolTipService.ToolTip> 
        <ToolTip Content="Offset ToolTip." 
                 HorizontalOffset="20" VerticalOffset="30"/>
    </ToolTipService.ToolTip>
</TextBlock>

Remarks

A ToolTip is a short description that is linked to another control or object. ToolTip s help users understand unfamiliar objects that aren't described directly in the UI. They display automatically when the user presses and holds or hovers the mouse pointer over a control. The ToolTip disappears after a short time, or when the user moves the pointer.

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.

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 it's 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 in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP&lt;SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.

Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.

This table shows the resources used by the ToolTip control.

Resource keyDescription
ToolTipForegroundText color in tool tip
ToolTipBackgroundBackground color
ToolTipBorderBrushBorder color

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.

Constructors

ToolTip() ToolTip() ToolTip() ToolTip()

Initializes a new instance of the ToolTip class.

public : ToolTip()public ToolTip()Public Sub New()// This API is not available in Javascript.

Properties

HorizontalOffset HorizontalOffset HorizontalOffset HorizontalOffset

Gets or sets the horizontal distance between the target origin and the pop-up alignment point.

public : double HorizontalOffset { get; set; }public double HorizontalOffset { get; set; }Public ReadWrite Property HorizontalOffset As double// This API is not available in Javascript.
<ToolTip HorizontalOffset="double"/>
Value
double double double double

The horizontal distance between the target origin and the pop-up alignment point. The default is 0.

HorizontalOffsetProperty HorizontalOffsetProperty HorizontalOffsetProperty HorizontalOffsetProperty

Identifies the HorizontalOffset dependency property.

public : static DependencyProperty HorizontalOffsetProperty { get; }public static DependencyProperty HorizontalOffsetProperty { get; }Public Static ReadOnly Property HorizontalOffsetProperty As DependencyProperty// This API is not available in Javascript.

IsOpen IsOpen IsOpen IsOpen

Gets or sets a value that indicates whether the ToolTip is visible.

public : PlatForm::Boolean IsOpen { get; set; }public bool IsOpen { get; set; }Public ReadWrite Property IsOpen As bool// This API is not available in Javascript.
Value
PlatForm::Boolean bool bool bool

true if the ToolTip is visible; otherwise, false. The default is false.

Remarks

This property is not typically set in XAML.

A ToolTip must be assigned to another UI element that is its owner. In XAML, use the ToolTipService.Tooltip attached property to assign the ToolTip to an owner. In code, use the ToolTipService.SetToolTip method to assign the ToolTip to an owner. If you set the IsOpen property to true in your app code before the ToolTip is assigned to an owner, an exception is thrown.

IsOpenProperty IsOpenProperty IsOpenProperty IsOpenProperty

Identifies the IsOpen dependency property.

public : static DependencyProperty IsOpenProperty { get; }public static DependencyProperty IsOpenProperty { get; }Public Static ReadOnly Property IsOpenProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsOpen dependency property.

Placement Placement Placement Placement

Gets or sets how a ToolTip is positioned in relation to the placement target element.

public : PlacementMode Placement { get; set; }public PlacementMode Placement { get; set; }Public ReadWrite Property Placement As PlacementMode// This API is not available in Javascript.
<ToolTip Placement="placementModeMemberName"/>

Examples

The following code example demonstrates the placement modes for a ToolTip.

<StackPanel Margin="120" >
    <TextBlock Text="ToolTip Control" Margin="5" 
               Style="{StaticResource HeaderTextStyle}" />
    <TextBlock Text="Hover over an item to see its ToolTip: " 
               Style="{StaticResource ItemTextStyle}" Margin="10" />
    <ListBox Width="100">
        <ListBoxItem Content="Left" 
            ToolTipService.ToolTip="ToolTip to the left." 
            ToolTipService.Placement="Left" />
        <ListBoxItem Content="Right" 
            ToolTipService.ToolTip="ToolTip to the right." 
            ToolTipService.Placement="Right" />
        <ListBoxItem Content="Top" 
            ToolTipService.ToolTip="ToolTip at the top." 
            ToolTipService.Placement="Top" />
        <ListBoxItem Content="Bottom" 
            ToolTipService.ToolTip="ToolTip at the bottom." 
            ToolTipService.Placement="Bottom"/>
        <ListBoxItem Content="Mouse" 
            ToolTipService.ToolTip="ToolTip based on the cursor position." 
            ToolTipService.Placement="Mouse"/>
    </ListBox>
</StackPanel>

Remarks

If there is no explicit PlacementTarget, the placement target for a ToolTip is the element that specifies the ToolTip as the value for its TooltipService.ToolTip attached property value, and any Placement value applies to that target.

Placement and PlacementTarget are usually left as the defaults. The scenario for specifying either or both of these properties is if you are trying to avoid a case where the tooltip obscures the content it is referring to while the tooltip is displayed.

See Also

PlacementProperty PlacementProperty PlacementProperty PlacementProperty

Identifies the Placement dependency property.

public : static DependencyProperty PlacementProperty { get; }public static DependencyProperty PlacementProperty { get; }Public Static ReadOnly Property PlacementProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Placement dependency property.

PlacementTarget PlacementTarget PlacementTarget PlacementTarget

Gets or sets the visual element or control that the tool tip should be positioned in relation to when opened by the ToolTipService.

public : UIElement PlacementTarget { get; set; }public UIElement PlacementTarget { get; set; }Public ReadWrite Property PlacementTarget As UIElement// This API is not available in Javascript.
<ToolTip PlacementTarget="{Binding ElementName=placementTargetName}"/>
Value
UIElement UIElement UIElement UIElement

The visual element or control that the tool tip is positioned in relation to when opened by the ToolTipService. The default is null.

Remarks

If there is no explicit PlacementTarget, the placement target for a ToolTip is the element that specifies the ToolTip as the value for its TooltipService.ToolTip attached property value, and any Placement value applies to that target. The placement target determination is based on visual tree composition, and whether to display a tooltip at all is parallel to the target's hit test characteristics. A Control instance where IsEnabled is false will not display a ToolTip.

Placement and PlacementTarget are usually left as the defaults. The scenario for specifying either or both of these properties is if you are trying to avoid a case where the tooltip obscures the content it is referring to while the tooltip is displayed.

See Also

PlacementTargetProperty PlacementTargetProperty PlacementTargetProperty PlacementTargetProperty

Identifies the PlacementTarget dependency property.

public : static DependencyProperty PlacementTargetProperty { get; }public static DependencyProperty PlacementTargetProperty { get; }Public Static ReadOnly Property PlacementTargetProperty As DependencyProperty// This API is not available in Javascript.

TemplateSettings TemplateSettings TemplateSettings TemplateSettings

Gets an object that provides calculated values that can be referenced as TemplateBinding sources when defining templates for a ToolTip.

public : ToolTipTemplateSettings TemplateSettings { get; }public ToolTipTemplateSettings TemplateSettings { get; }Public ReadOnly Property TemplateSettings As ToolTipTemplateSettings// This API is not available in Javascript.
Value
ToolTipTemplateSettings ToolTipTemplateSettings ToolTipTemplateSettings ToolTipTemplateSettings

An object that provides calculated values for templates.

VerticalOffset VerticalOffset VerticalOffset VerticalOffset

Gets or sets the vertical distance between the target origin and the pop-up alignment point.

public : double VerticalOffset { get; set; }public double VerticalOffset { get; set; }Public ReadWrite Property VerticalOffset As double// This API is not available in Javascript.
<ToolTip VerticalOffset="double"/>
Value
double double double double

The vertical distance between the target origin and the pop-up alignment point. The default is 0.

VerticalOffsetProperty VerticalOffsetProperty VerticalOffsetProperty VerticalOffsetProperty

Identifies the VerticalOffset dependency property.

public : static DependencyProperty VerticalOffsetProperty { get; }public static DependencyProperty VerticalOffsetProperty { get; }Public Static ReadOnly Property VerticalOffsetProperty As DependencyProperty// This API is not available in Javascript.

Events

Closed Closed Closed Closed

Occurs when a ToolTip is closed and is no longer visible.

public : event RoutedEventHandler Closedpublic event RoutedEventHandler ClosedPublic Event Closed// This API is not available in Javascript.
<ToolTip Closed="eventhandler"/>

Opened Opened Opened Opened

Occurs when a ToolTip becomes visible.

public : event RoutedEventHandler Openedpublic event RoutedEventHandler OpenedPublic Event Opened// This API is not available in Javascript.
<ToolTip Opened="eventhandler"/>

See Also