RadDropDownButton Tooltip Also Shows on RadDropDownButton.DropDownContent

[Kyle]

I have a RadDropDownButton which DropDownContent is a StackPanel (which in turn contains other controls).

The issue I am having is, defining a Tooltip for the RadDropDownButton results in the Tooltip also being displayed on the dropped-down StackPanel (except for any position that then contains another control).

The intent is only to display the Tooltip on the button itself, and not on the resultant StackPanel that flies out when the button is pressed. Currently the workaround is to have an image displayed on the button and then have the tooltip attached to the image. But, I would like to know if there is a better fix for this.

[Stefan]

Hello Kyle,

Can you please clarify in what manner the ToolTip is applied to the control, as I am not able to replicate this behavior on my end? It would be also quite useful if you can demonstrate your setup in the attached sample application, so I can hopefully provide a solution.

I will be looking forward to hearing from you.

Regards,
Stefan X1
Progress Telerik

[Jeff]

 I work with Kyle and just took a quick look at your posted code. This issue really isn't difficult to recreate. I've made some minor changes to your supplied "MainWindow.xaml" file to make the issue easier to see. My file now looks like this:

 

Window x:Class="DropDownButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:my="clr-namespace:DropDownButton"
        Title="MainWindow" Height="700" Width="700">
    <Window.Resources>
        <my:MyViewModel x:Key="MyViewModel"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource MyViewModel}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <telerik:RadDropDownButton HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                                   ToolTip="A tooltip for the DropDown button"
                                   ToolTipService.ShowDuration="2000"
                           Content="Actions">
            <telerik:RadDropDownButton.DropDownContent>
                <StackPanel Background="Yellow">
                    <Button Content="Hello" Margin="25"/>
                </StackPanel>
            </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>
    </Grid>
</Window>

 

Really, I just simplified the content of the DropDown Stack Panel and changed its background to Yellow to make the background more visible.

To see the problem, just run the code. If you hover over the dropdown button itself, you'll correctly see the assigned tooltip. However, if you expose dropdown content and hover over the yellow background area (so, empty space in the stackpanel), you'll also see the button's tooltip (you might have to move on/off the background to trigger it). That's the issue that was described in the OP.

Kyle may have more input, but that should be all you need.

Thanks.

[Stefan]

Hi Jeff,

Thanks for the update.

It seems that the ToolTip is inherited in this case, thus is displayed for the elements defined within the DropDownContent as well. In this case, you can adopt one of the solutions discussed in the ToolTip on TabItem: Show on header, but not on content StackOverflow thread. Can you please check it out?

Hopefully, this helps.

Regards,
Stefan X1
Progress Telerik

[Kyle]

Hi Stefan,

Thank you for your reply and the link to that StackOverflow thread.

It appears that for that issue, the user had a TabItem, and for that fix, they bound the Tooltip to the TabItem's Header.

Of course, neither the RadDropDownButton or the underling Windows Button have a Header property.

We do currently implement a workaround, as shown by the following code:

Window x:Class="DropDownButton.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
         xmlns:my="clr-namespace:DropDownButton"
         Title="MainWindow" Height="700" Width="700">
    <Window.Resources>
        <my:MyViewModel x:Key="MyViewModel" />
    </Window.Resources>
    <Grid DataContext="{StaticResource MyViewModel}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <telerik:RadDropDownButton HorizontalAlignment="Left"
                                            VerticalAlignment="Top"
                                            Content="Actions">
            <Image Source="{StaticResource MyImage}"
                     Tooltip="A tooltip for the DropDown button"
                     ToolTipService.ShowDuration="2000" />
            <telerik:RadDropDownButton.DropDownContent>
                <StackPanel Background="Yellow">
                    <Button Content="Hello" Margin="25" />
                </StackPanel>
            </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>
    </Grid>
</Window>

The only changes made from Jeff's code above is that now the Tooltip is bound to an image on the button.

However, the downside of this is that the hitbox for activating the Tooltip is now that of the image, and not that of the actual button itself, which is out ultimate intent.

Is their any other way this could be achieved, so that the Tooltip can be accessed by hovering over the entire button, instead of another control (in this case the image), and yet not be inherited by any child-controls (in this case the RadDropDownButton.DropDownContent)?

[Stefan]

Hi Kyle,

Thank you for this clarification.

Another possible solution, as discussed in the previously referred thread, would be to define a Style targeting the ToolTip and set zero values for its Width and Height. I will paste the solution here for your convenience.

<Style x:Key="NullToolTip" TargetType="{x:Type ToolTip}">
    <Setter Property="Width" Value="0" />
    <Setter Property="Height" Value="0" />
    <Setter Property="Content" Value="{x:Null}" />
</Style>

<ToolTip x:Key="NoToolTip" Style="{StaticResource NullToolTip}" />

Then, you should be able to set this ToolTip to the element defined within the DropDownContent. Can you please give this suggestion a try?

Regards,
Stefan X1
Progress Telerik

[Kyle]

This solution does not work for our case as telerik:RadDropDownButton.DropDownContent does not have a ToolTipService or ToolTip property.

Assigning this code change to the StackPanel also does not work, as the ToolTip is still being displayed.

[Kyle]

Eating my words.

My manager (Jeff) implemented the second fix on a test application that worked and sent me his example code. For my implementation I had a bug, and in following his example, yes, the fix does work.

Stefan, thank you so much for all the help and both Jeff and I greatly appreciate it.

[Stefan]

Hi Kyle,

I am happy that the provided fix is working as expected on your end.

In case you need any other assistance with our controls, do not hesitate to contact us again.

All the best,
Stefan X1
Progress Telerik