Baloon tooltip above the overlay using WPF

Question

Hi Team,

I need a ballon kind of tooltip just above the overlay using WPF XAML C#.(I need tooltil same as below screenshot).

Answer 1

Below is an example about Balloon tooltip above the overlay, you could try to refer to it. For the content of the tooltip position, you can refer to here.
MainWindow.xaml:

<Window x:Class="tooltipballoon.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:tooltipballoon"  
        mc:Ignorable="d"  Name="window" Loaded="window_Loaded"  
        Title="MainWindow" Height="450" Width="800">  
    <Window.ToolTip>  
        <ToolTip x:Name="tt">Press G to Surface or Hide</ToolTip>  
    </Window.ToolTip>  
    <Window.Resources>  
        <Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">  
            <Setter Property="Placement" Value="Top"/>  
            <Setter Property="PlacementTarget" Value="{Binding ElementName=winodw}"/>  
            <Setter Property="PlacementRectangle" Value="10,0,700,0"/>  
            <Setter Property="OverridesDefaultStyle" Value="true" />  
            <Setter Property="HorizontalOffset" Value="250" />  
            <Setter Property="VerticalOffset" Value="15" />  
            <Setter Property="Background" Value="LightSkyBlue" />  
            <Setter Property="Foreground" Value="White" />  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="ToolTip">  
                        <Canvas Width="200" Height="100">  
                            <Path x:Name="Container"  
                  Canvas.Left="0" Canvas.Top="0"                                   
                  Margin="0" Data="M 0,45 L10,40  L160,40 C160,40 170,40 170,35 L170 10 C170,10 170,5 160,5 L10,5 C10,5 0,5 0,10 L0,35 C0,35 0,40 0,45 Z"                                      
                  Stroke="LightSkyBlue">  
                                <Path.Fill>  
                                    <SolidColorBrush Color="DeepSkyBlue"/>  
                                </Path.Fill>  
                            </Path>  
                            <TextBlock Canvas.Left="15" Canvas.Top="15"  Width="200"  
                       Height="55" Text="{TemplateBinding Content}" TextWrapping="Wrapwithoverflow" />  
                        </Canvas>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  
    </Window.Resources>  
    <Grid>  
    </Grid>  
</Window>  

MainWindow.xaml.cs:

using System.Windows;  
using System.Windows.Input;  
  
namespace tooltipballoon  
{  
  public partial class MainWindow : Window  
  {  
    public MainWindow()  
    {  
      InitializeComponent();  
    }  
    private void window_Loaded(object sender, RoutedEventArgs e)  
    {  
      var window = Window.GetWindow(this);  
      window.KeyDown += windowKeyDown;  
    }  
    private void windowKeyDown(object sender, KeyEventArgs e)  
    {  
      var window =sender as Window;  
        
      tt.PlacementTarget=window;  
      if (e.Key == Key.G)  
      {  
        if (tt.IsOpen == false)  
        {  
          tt.IsOpen = true;  
        }  
        else  
        {  
          tt.IsOpen = false;  
        }  
      }  
    }  
  }  
}  

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.