CODEWITHSUNDEEP
wpf
Sonny D
Sonny D

Reputation: 981

How to set ToolTip width exact like parent element?

How to set Tootip width exact like element for which tooltip is set?

<Button ToolTipService.ShowOnDisabled="True" Content="Save" IsEnabled="False" Width="150">
    <Button.ToolTip>
        <ToolTip Placement="Top" VerticalOffset="-5">
            <TextBlock>Confirm before save.</TextBlock>
        </ToolTip>
    </Button.ToolTip>
</Button>

Now the tooltip's width corresponds to the width of the text 'Confirm before save.'.

Upvotes: 1

Views: 698

Answers (2)

Bakri Bitar
Bakri Bitar

Reputation: 1697

Tooltip is a property of the element containing it (and it is not its parent as you've stated in question)

A quick workaround is to define a Width property as resource in your Window/Page and then use it in both Tooltip and the containing Element like this 

    <!--Define a width as resource-->
    <Window.Resources>
             <sys:Double x:Key="WidthOf200">200</sys:Double>
     </Window.Resources>
    <Grid>
        <!--Use the same width in the button and its tooltip-->
        <Button Name="button1" ToolTipService.ShowOnDisabled="True" Content="Save" IsEnabled="False" Height="50"  Width="{StaticResource WidthOf200}">
            <Button.ToolTip>
                <!--Use the same width in the button and its tooltip-->

                <ToolTip Placement="Top" VerticalOffset="-5"  Width="{StaticResource WidthOf200}">
                    <TextBlock  >Confirm before save.</TextBlock>
                </ToolTip>
            </Button.ToolTip>
        </Button>
    </Grid>
</Window>

enter image description here

Upvotes: 1

Alexandre Asselin
Alexandre Asselin

Reputation: 195

You could make a binding on the PlacementTarget property of your tooltip, like this : 

    <Button x:Name="SaveButton" ToolTipService.ShowOnDisabled="True" Content="Save" IsEnabled="False" Width="150">
        <Button.ToolTip>
            <ToolTip Placement="Top" VerticalOffset="-5"  Width="{Binding PlacementTarget.Width, RelativeSource={RelativeSource Self}}">
                <TextBlock>Confirm before save.</TextBlock>
            </ToolTip>
        </Button.ToolTip>
    </Button>

Upvotes: 1

Related Questions