Question

Tooltips on a TabControl's TabItems are not only spawn on the TabItem's header, but also on any TabItem content which doesn't explicitly set its own ToolTip.

Here is an example, which reproduces the problem:

<Window x:Class="TestToolTipsOnTabControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow">
    <Grid>
        <TabControl>
            <TabItem Header="Tab1"
                     ToolTip="Tooltip of tab1">
                <StackPanel>
                    <TextBlock Text="Content of tab1 with its own tooltip" 
                               ToolTip="Tooltip on content of tab1"/>
                    <TextBlock Text="more content of tab1" />
                </StackPanel>
            </TabItem>
            <TabItem Header="Tab2"
                     ToolTipService.ToolTip="Tooltip of tab2">
                <StackPanel>
                    <TextBlock Text="Content of tab2 with its own tooltip"
                               ToolTipService.ToolTip="Tooltip on content of tab2"/>
                    <TextBlock Text="more content of tab2" />
                </StackPanel>
            </TabItem>
            <TabItem Header="Tab3">
                <StackPanel>
                    <TextBlock Text="Content of tab3" />
                    <TextBlock Text="more content of tab3" />
                </StackPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Moving the mouse pointer over the "more content of tab1" text will display the ToolTip which I'd like to only show up on the TabItem header.

Is there any way to for the ToolTip to show up only on the TabItem header, but nowhere else?

Was it helpful?

Solution

Is there any way to for the ToolTip to show up only on the TabItem header, but nowhere else?

You should only apply Tooltip to the Header not the whole TabItem so change it to:

           <TabItem>
                <TabItem.Header>
                    <TextBlock Text="Tab1" 
                     ToolTip="Tooltip of tab1"/>
                </TabItem.Header>
                <StackPanel>
                    <TextBlock Text="Content of tab1 with its own tooltip" 
                               ToolTip="Tooltip on content of tab1"/>
                    <TextBlock Text="more content of tab1" />
                </StackPanel>
            </TabItem>

OTHER TIPS

Add the below piece of code to the textblocks

ToolTip="", ToolTipSevice.ShowDuration="0"

This works for me when adding tabItems dynamically:

TabItem nt = new TabItem
string _newTabItemText = "xxxx" // Dynamic header text
string _newTabItemTooltip = "xxxx Tooltip" // Dynamic tooltip text
string _newTabItemName = "xxxx" // tabItem name to reference the tab item in code ie XAML x:name = "xxxx"
{
  Header = new TextBlock() { Text = _newTabItemText, ToolTip = _newTabItemTooltip },
  Name = _newTabItemName,
  Width = 108
};

As an alternative, I can offer is this: created a Style for ToolTip with zero Width and Height:

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

When created ToolTip with this Style and placed in Resources:

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

And assign to control that want to turn off the ToolTip:

<TabItem Header="Tab1" ToolTip="Tooltip of tab1">
    <StackPanel>
        <TextBlock Text="Content of tab1 with its own tooltip" ToolTip="Tooltip on content of tab1"/>

        <TextBlock Text="more content of tab1" ToolTipService.ToolTip="{StaticResource NoToolTip}" />
    </StackPanel>
</TabItem>

Note: Similar problem appears when you use the ToolTip for TreeViewItem. His children inherit parent ToolTip.

Just in case someone is running into this issue when creating the tabs dynamically, the following code did the magic:

        TabItem tabItem = new TabItem();
        var stackPanel = new StackPanel();

        var stackPanelToolTip = new System.Windows.Controls.ToolTip();
        stackPanelToolTip.Content = "ToolTip content";
        stackPanel.ToolTip = (stackPanelToolTip);

        tabItem.Header = stackPanel;

So the key here was to add the tooltip to the tab header, but not to the tab element (adding it to the header means that you will have the tooltip visible only when mouse is hover the tab).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top