Tooltip Placement - WPF - wpf

Question

I'm trying to put together a tool tip for a simple button. However when the mouse is hovered over the button, the tool tip does not appear below it.
Please see this :
This xaml is as below:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Page.Resources>
<Style x:Key="ToolTipStyle" TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid x:Name="PopupGrid">
<Grid x:Name="ShadowBackground" Height="65" Width="260">
<Grid.Effect>
<DropShadowEffect BlurRadius="7" ShadowDepth="1" Opacity="0.5" />
</Grid.Effect>
<Path Margin="0 0 50 0" Width="20" Height="10" HorizontalAlignment="Right" VerticalAlignment="Top" Data="M0,10 L10,0 20,10Z" Stroke="Gray" Fill="#EFEFF0" Stretch="None" />
<Border BorderThickness="1 0 1 1" CornerRadius="3" Margin="10 9 10 10" BorderBrush="Gray" Background="#EFEFF0">
<ContentPresenter/>
</Border>
<Border BorderThickness="0 1 0 0" CornerRadius="0 0 3 0" Margin="0 9 10 0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="41" Height="10" BorderBrush="Gray" />
<Border BorderThickness="0 1 0 0" CornerRadius="3 0 0 0" Margin="10 9 69 0" VerticalAlignment="Top" Height="10" BorderBrush="Gray" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToolTipHeaderStyle" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style x:Key="ToolTipTextStyle" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="12"/>
</Style>
</Page.Resources>
<Grid x:Name="PopupGrid" Background="Red">
<Button Width="100" Height="30" Content="Click Me!">
<Button.ToolTip>
<ToolTip Style="{StaticResource ToolTipStyle}">
<StackPanel Orientation="Vertical">
<Label Content="Newly Rejected" Style="{StaticResource ToolTipHeaderStyle}"></Label>
<Label Content="Please perform requested edits and resubmit" Style="{StaticResource ToolTipTextStyle}"></Label>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
</Page>
I'm not sure what is causing this behavior. Can you please help to get the placement correct?
Forgot to mention how it should appear:
the triangle of the tooltip should be places right below the mouse cursor, which would mean that the tooltip should move towards left.Something like this:
Thanks,
-Mike

Answer 1

Have you played around with the placement properties?
You can add this to your ToolTipStyle:
<Setter Property="ToolTipService.Placement" Value="Left" />
There's also ToolTipService.PlacementRectangle and ToolTipService.PlacementTarget
EDIT:
You could try:
<Setter Property="ToolTipService.HorizontalOffset" Value="-200" />

Answer 2

Use the CustomPopupPlacementCallback.. In my case I needed the tip to display on the right of a textbox, Placement.Right worked fine on my laptop, but was displaying to the left on my touchscreen, the easiest way to fix this is to use the callback to calculate a relative offset in the code behind:
...
tip.PlacementTarget = this;
tip.Placement = PlacementMode.Custom;
tip.CustomPopupPlacementCallback = new CustomPopupPlacementCallback(PositionTooltip);
...
private CustomPopupPlacement[] PositionTooltip(Size popupSize, Size targetSize, Point offset)
{
double offsetY = targetSize.Height / 2 + popupSize.Height;
double offsetX = targetSize.Width;
return new CustomPopupPlacement[] { new CustomPopupPlacement(new Point(offsetX, offsetY), PopupPrimaryAxis.None) };
}