How to place the bottom center of the tooltip

Question

I am trying to position my tooltip so that it is at the bottom and in the center of my target. I can place it at the bottom on ToolTipService.Postion="Bottom" , but how to place it in the same way as in the center?

Answer 1

I agree that the options available for positioning ToolTip are a bit limited. I think you need to combine Placement="Bottom" with HorizontalOffset to get Bottom / Center positioning.

To center ToolTip relative to PlacementTarget , you can use (PlacementTarget.ActualWidth / 2.0) - (ToolTip.ActualWidth / 2.0)

Example

 <Button Content="Test"> <Button.ToolTip> <ToolTip Content="ToolTip Text" Placement="Bottom"> <ToolTip.HorizontalOffset> <MultiBinding Converter="{StaticResource CenterToolTipConverter}"> <Binding RelativeSource="{RelativeSource Self}" Path="PlacementTarget.ActualWidth"/> <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth"/> </MultiBinding> </ToolTip.HorizontalOffset> </ToolTip> </Button.ToolTip> </Button> 

CenterToolTipConverter

 public class CenterToolTipConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { if (values.FirstOrDefault(v => v == DependencyProperty.UnsetValue) != null) { return double.NaN; } double placementTargetWidth = (double)values[0]; double toolTipWidth = (double)values[1]; return (placementTargetWidth / 2.0) - (toolTipWidth / 2.0); } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotSupportedException(); } } 

If you need to center multiple ToolTips , you can use Style as

 <Style x:Key="centeredToolTip" TargetType="ToolTip"> <Setter Property="HorizontalOffset"> <Setter.Value> <MultiBinding Converter="{StaticResource CenterToolTipConverter}"> <Binding RelativeSource="{RelativeSource Self}" Path="PlacementTarget.ActualWidth"/> <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth"/> </MultiBinding> </Setter.Value> </Setter> </Style> <!-- ... --> <Button Content="Test"> <Button.ToolTip> <ToolTip Style="{StaticResource centeredToolTip}" Placement="Bottom" Content="ToolTip Text"/> </Button.ToolTip> </Button>