Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position tooltip bottom center

Tags:

wpf

I'm trying to position my tooltip so that it would be on the bottom and center of my target object. I can position it to be just on the bottom by ToolTipService.Postion="Bottom", but how to position it to be also on the center?

like image 749
Cobold Avatar asked Jun 10 '12 21:06

Cobold


People also ask

How do you make a tooltip center?

If you want the tooltip to appear on top or on the bottom, see examples below. Note that we use the margin-left property with a value of minus 60 pixels. This is to center the tooltip above/below the hoverable text. It is set to the half of the tooltip's width (120/2 = 60).

How to position a tooltip?

The absolute value of the position property positions the tooltip with respect to the div element. Moreover, stack order of the tooltip is set to 1 to place it in front of the div container. Furthermore, to place it exactly below the element we have set the top, left, and margin-left properties.

How do I get the tooltip at the top of a div?

The only thing you have to do is set an attribute on any div called "data-tooltip" and that text will be displayed next to it when you hover over it.


1 Answers

I agree, the options available for positioning a ToolTip are a little limited. I think you'll have to combine Placement="Bottom" with HorizontalOffset to get Bottom/Center positioning.

To center the ToolTip relative to the 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 several ToolTips you could use a Style like

<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>
like image 145
Fredrik Hedblad Avatar answered Oct 18 '22 17:10

Fredrik Hedblad