C# WPF Tooltips not showing on child grid

Question

For some reason the tooltips won't show in my child grid.

<Grid DockPanel.Dock="Top"
    Width="300px"
    Height="250px"
    ToolTipService.ToolTip="MainGrid Tooltip">
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="1.25*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
        ToolTip="mygrid tooltip 2">
    <StackPanel Orientation="Horizontal">
        <Image Width="15"
                Source="<<INSERT IMAGE FILE LOCATION HERE>>" 
                ToolTipService.ToolTip="Child Grid Tooltip 1"/>
        <TextBlock Width="80"
                Text="Random Text 2"
                ToolTipService.ToolTip="Child Grid Tooltip 2"/>
        <TextBlock Width="80" 
                Text="Random Text 3"
                ToolTipService.ToolTip="Child Grid Tooltip 3"/>
    </StackPanel>

</Grid>

I keep getting the "mygrid tooltip 2" being displayed, even though I have overridden the tooltip for it's children - it won't show.

I have lessened the complexity from having control templates in resource dictionaries until I am now only left with this above, and still nothing.

any ideas will be greatly appreciated, also perhaps links where I can read up about it. my WPF book and msdn isn't producing anything substancial at the moment.

thanks,

Answer 1

In order for something in WPF to be able to display a tooltip, it has to be visible to hit testing.

In the case of panels, this is done by setting the background color to something besides null (which is the default for all panels). If you want your panels to be invisible but still be eligible for hit testing, you can use Transparent as the background color.

<Grid Background="Transparent" ToolTip="This Will Be Shown">
    <!-- other stuff -->
</Grid>

<Grid ToolTip="This Will NOT Be Shown">
    <!-- other stuff -->
</Grid>

Answer 2

@Isak, thanks, your Background="Transparent" assisted in my final solution.

I ultimately threw away the Grid with defined rows / columns, and resorted to a Grid with nested StackPanels.

Previously the Grid.Rows were being populated by ContentControls, I replaced this with local Stackpanels containing the information I needed to display and that seemed to have solved it, but only after I added the "Transparent" tag to the stackpanels and also a

IsHitTestVisible="False"

on an image in the parent grid which serves as a background image.

Herewith an example of my current solution, the second part which replaces the code seen in my original post.

First, the basic source file layout before getting to the code in question looks like this:

<ResourceDictionary xmlns="...
  <DataTemplate DataType="...
    <Grid Style="...
      <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

       <Grid Name="LeftColumn" Grid.Column="0">
         <TextBlock Style="{StaticResource TextHeader}"
                    Text="Review 10 Patients"/>

         <Image RenderOptions.BitmapScalingMode="NearestNeighbor"
                SnapsToDevicePixels="True"
                Stretch="None"
                DockPanel.Dock="Top"
                IsHitTestVisible="False"
                Source="((INSERT IMAGE HERE))" Margin="0,-2,0,10"/>

And then my solution grid as follows [replaces initial post code]:

       <StackPanel>

         <StackPanel Background="Transparent" Orientation="Horizontal">
           <Image Style="{StaticResource InfoImage}" Margin="3">
             <ToolTipService.ToolTip>
               <ToolTip Width="200" Style="{StaticResource ToolTip}"
                        Content="ToolTip 1"/>
             </ToolTipService.ToolTip>
           </Image>

           <TextBlock Width="140" Style="{StaticResource Text_SelfTitle}"
                      Text="Text Field 1"/>
           <TextBlock Width="145" Style="{StaticResource Text_SelfQuestions}"
                      Text="Text Field 2"/>
         </StackPanel>

         <StackPanel Background="Transparent" Orientation="Horizontal">
            ((... similar as above...))
         </StackPanel>

         <StackPanel Background="Transparent" Orientation="Horizontal">
            ((... similar as above...))
         </StackPanel>

       </StackPanel>
     </Grid>
  </Grid>

Hope this helps somebody else should you experience something similar.