Tooltip Placement - 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

Danette

you can see this : #14276255 IsMouseOver property is not set for your case. – Shambles

I'm not sure how the mouse over will solve this. – Danette

well, i never used tooltip, but what i understand is that when you mouse over the button, it should display a box. for this dont you need to trigger the mouseover event? I am not sure. hopefully some expert will clarify. – Shambles

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" />

Slavism

I edited my answer with another potential way to solve your issue. – Slavism

However does't work when the tooltip is specified inside a datatemplate..See: #17452223 – Danette

Glad I could help mdiehl13 ;) – Slavism

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) };
    }

Patriarchate

Answer 3

<!-- Base Button Style -->
<Style x:Key="templateButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" 
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Info Button Style -->
<Style x:Key="infoButtonStyle" TargetType="Button" BasedOn="{StaticResource templateButtonStyle}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="ToolTipService.InitialShowDelay" Value="300"/>
</Style>


<!-- FontAwesome and Hosting Package Reference -->
<ItemGroup>
    <PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
    <PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />
</ItemGroup>

<!-- Include FontAwesome Namespace in XAML -->
<!-- xmlns:fa="http://schemas.fontawesome.io/icons/" -->


// Data binding from ViewModel
IHost? _host = Host.CreateDefaultBuilder()
    .ConfigureServices((context, services) =>
    {
        // Register ViewModels
        services.AddSingleton<MainViewModel>();

        // Register Views with their respective DataContext
        services.AddSingleton<MainWindow>(serviceProvider =>
        {
            var viewModel = serviceProvider.GetRequiredService<MainViewModel>();
            return new MainWindow { DataContext = viewModel };
        });
    }).Build();
}

protected override void OnStartup(StartupEventArgs e)
{
    // Show the main window
    var mainWindow = _host?.Services.GetRequiredService<MainWindow>();
    mainWindow?.Show();

    base.OnStartup(e);
}


<!-- Info Button with FontAwesome Icon and Tooltip -->
<Button>
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <fa:FontAwesome Icon="InfoCircle" Margin="5, 0, 5, 0"/>
    </StackPanel>
    <Button.Style>
        <Style TargetType="Button" BasedOn="{StaticResource infoButtonStyle}">
            <Setter Property="ToolTip">
                <Setter.Value>
                    <!-- Tooltip placed relative to the button itself -->
                    <ToolTip Placement="Bottom" PlacementTarget="{Binding RelativeSource={RelativeSource Self}}">
                        <!-- Binding to Description property for Tooltip content -->
                        <TextBlock Text="{Binding Description}"/>
                    </ToolTip>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!-- Hide button if Description is empty -->
                <DataTrigger Binding="{Binding Description}" Value="">
                    <Setter Property="Visibility" Value="Hidden"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Teapot

Hello and Welcome to StackOverflow ! Please suggest an answer that can be runnable and not lacking supporting information. For example, you add Font Awesome here and point to a static resource not included in your sample. You also bind to a view model here. Please provide complete examples where the XAML should be possible to paste into for example kaXaml and be inspected. Also add some description about your answer, do not just paste code. – Vatican