How to use ToolTip for DataGrid?

Question

I'm trying to create a popup that appears when the user overlaps the mouse in a cell. I've seen some online tutorials and I created a ToolTip this:

<DataGrid>
   <DataGrid.CellStyle>
       <Style>
         <Setter Property="DataGridCell.ToolTip">
               <Setter.Value>bb</Setter.Value>
         </Setter>
       </Style>
    </DataGrid.CellStyle>
    <DataGrid.Columns>
      <DataGridTextColumn Binding="{Binding Path = 'position'}" ClipboardContentBinding="{x:Null}" Header="Pos." Width="*"/>
      <DataGridTextColumn Binding="{Binding Path = 'teamName'}" ClipboardContentBinding="{x:Null}" Header="Squadra" Width="*" />
      <DataGridTextColumn Binding="{Binding Path = 'points'}" ClipboardContentBinding="{x:Null}" Header="Punti"  Width="*"/>
      <DataGridTextColumn Binding="{Binding Path = 'playedGames'}" ClipboardContentBinding="{x:Null}" Header="Giocate"  Width="*"/>
      <DataGridTextColumn Binding="{Binding Path = 'goals'}" ClipboardContentBinding="{x:Null}" Header="Goal fatti" Width="*"/>
      <DataGridTextColumn Binding="{Binding Path = 'goalsAgainst'}" ClipboardContentBinding="{x:Null}" Header="Goal subiti" Width="*"/>
      <DataGridTextColumn Binding="{Binding Path = 'goalDifference'}" ClipboardContentBinding="{x:Null}" Header="Differenza reti" Width="*"/>
     </DataGrid.Columns>
</DataGrid>

the only problem is that I do not understand how to show the full text of a single cell when the user overlaps with the mouse on it. Particularly when the DataGrid is minimum resolution of the header cells are not shown completely, and that is a problem, to avoid this I would make sure that if it is the user overlaps the mouse on "pos", then it is the showed the complete header as tooltip is "position". How can I do this?

Answer 1

For DataGrid Cells:

If you want a ToolTip that shows the full content of a particular DataGrid cell when the mouse is over it, you can modify your DataGridTextColumn and use the same Binding for the ToolTip:

<DataGridTextColumn Binding="{Binding Path = 'position'}" ClipboardContentBinding="{x:Null}" Header="Pos." Width="*">
    <DataGridTextColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="ToolTip" Value="{Binding Path = 'position'}" />
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

Or, if you want to set it once for all the columns, you can bind to the Text property of the DataGridTextColumn's content:

<DataGrid.CellStyle>
    <Style TargetType="DataGridCell">
        <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.Text}" />
    </Style>
</DataGrid.CellStyle>

For DataGrid Column Headers:

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="ToolTip" Value="{Binding}" />
    </Style>
</DataGrid.ColumnHeaderStyle>