Share via

  • Article

ToolTip Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

This topic describes the styles and templates for the ToolTip control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

Tooltip Parts

The ToolTip control does not have any named parts.

ToolTip States

The following table lists the visual states for the ToolTip control.

VisualState Name

VisualStateGroup Name

Description

Closed

OpenStates

The default state.

Open

OpenStates

The ToolTip is visible.

Default Style and Template

The following shows the XML namespace mapping that you have to specify when you work with styles and templates.

<!-- XML Name Space mapping. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the ToolTip control.

<Style TargetType="ToolTip">
      <Setter Property="Background" Value="#FFF7F8FA"/>
      <Setter Property="Padding" Value="3,0,3,0"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="BorderBrush">
          <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FFA3AEB9" Offset="0"/>
                  <GradientStop Color="#FF8399A9" Offset="0.375"/>
                  <GradientStop Color="#FF718597" Offset="0.375"/>
                  <GradientStop Color="#FF617584" Offset="1"/>
              </LinearGradientBrush>
          </Setter.Value>
      </Setter>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="ToolTip">
                  <Border x:Name="Root" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFFFFFFF" BorderBrush="{TemplateBinding BorderBrush}">
                      <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                          <Border.Resources>
                              <Storyboard x:Key="Visible State"/>
                              <Storyboard x:Key="Normal State"/>
                          </Border.Resources>
                          <ContentPresenter
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Cursor="{TemplateBinding Cursor}"
                              Margin="{TemplateBinding Padding}"/>
                      </Border>
                  </Border>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>