Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

ToolTip styles and templates

[ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

This topic describes the default style and template for the ToolTip control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.

Note   These styles and resources are based on the Windows Software Development Kit (SDK) for Windows 10, Version 1511 (Windows SDK version 10.0.10586.0). Styles and resources from other versions of the SDK might have different values. For design purposes, generic.xaml is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic folder from a Windows SDK installation.
 

Visual states

These are the VisualStates defined in the control's default style.

VisualState nameVisualStateGroup name
OpenedOpenStates
ClosedOpenStates

 

Theme resources

These resources are used in the control's default style. For more info about theme resources and the brushes used in the default style, see XAML theme resources.


<x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
<Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>

Default style


<!-- Default style for Windows.UI.Xaml.Controls.ToolTip -->
<Style TargetType="ToolTip">
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ToolTipBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ToolTipContentThemeFontSize}" />
<Setter Property="Padding" Value="8,5,8,7" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ToolTip">
      <ContentPresenter x:Name="LayoutRoot"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         MaxWidth="320"
                         Content="{TemplateBinding Content}"
                         ContentTransitions="{TemplateBinding ContentTransitions}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         Padding="{TemplateBinding Padding}"
                         TextWrapping="Wrap" >
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="OpenStates">
            <VisualState x:Name="Closed">
              <Storyboard>
                <FadeOutThemeAnimation TargetName="LayoutRoot" />
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Opened">
              <Storyboard>
                <FadeInThemeAnimation TargetName="LayoutRoot" />
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
      </ContentPresenter>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>


Related topics

Styling controls
Control templates

 

 

Show: