Search code examples
wpfxamlstylestooltip

How to style WPF tooltip like a speech bubble?


I want to shape my WPF tooltip like the image below:

enter image description here

How do I achieve this?


Solution

  • Use this Code:

    <Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
        x:Name="Window"
        Title="MainWindow"
        Width="640"
        Height="480">
    
    <Window.Resources>
    
        <Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="HasDropShadow" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToolTip">
                        <ed:Callout Name="Border"
                                    Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    MinWidth="100"
                                    MinHeight="30"
                                    Margin="0,0,0,50"
                                    AnchorPoint="0,1.5"
                                    Background="{StaticResource LightBrush}"
                                    BorderBrush="{StaticResource SolidBorderBrush}"
                                    BorderThickness="1"
                                    CalloutStyle="RoundedRectangle"
                                    Fill="#FFF4F4F5"
                                    FontSize="14.667"
                                    Stroke="Black">
                            <ContentPresenter Margin="4"
                                              HorizontalAlignment="Left"
                                              VerticalAlignment="Top" />
                        </ed:Callout>
    
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
    </Window.Resources>
    <Grid>
        <Button ToolTip="Hello" />
    </Grid>
    

    this is the begining, now you have to play with it... enjoy!

    enter image description here