WPFBlog » Blog Archive » Custom ToolTip Style in WPF

Custom ToolTip Style in WPF

Here’s a custom ToolTip style I put together as an example for someone in the MSDN forums:

<Window x:Class="WPFBlog.Info.ToolTips.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="{x:Type ToolTip}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="VerticalOffset" Value="-2" />
            <Setter Property="HorizontalOffset" Value="20" />
            <Setter Property="Placement" Value="Top" />
            <Setter Property="Opacity" Value=".8" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToolTip}">
                        <Grid Name="Border" Background="Transparent" Width="{TemplateBinding Width}" Height="60">
                            <Rectangle Height="35" RadiusX="7.5" RadiusY="7.5">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0.5,-0.5" EndPoint="0.547,0.913">
                                        <GradientStop Color="YellowGreen" Offset="0"/>
                                        <GradientStop Color="Yellow" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Path Fill="Yellow" Stretch="Fill" HorizontalAlignment="Left" Margin="10,45,0,0" Width="15.692" Height="14.81" Data="M130,122 L138,136 144,122"/>
                            <ContentPresenter Margin="10,0,10,0" HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.Foreground="Black" TextBlock.FontSize="12" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="MouseOver for ToolTip" ToolTip="Here's your new ToolTip" />
    </Grid>
</Window>

And here’s the output:

Enjoy!

Leave a Comment