Add ToolTip for columns and headers

This article demonstrates how to set the tooltip of the gridview's rows, columns and column headers.

First you should add a GridView to the user control and bind it to some data.

<telerik:RadGridView Name="gridView" ItemsSource="{Binding}" /> 

ToolTip for column's cells

You can check the source code below on how to set a ToolTip for a specific column. The ToolTip will use a DataTemplate with TextBlocks and will show information from the currently hovered row. The final result should look like this:

To achive that you can define a ToolTipTemplate for the column:

<telerik:GridViewDataColumn DataMemberBinding="{Binding ID}" > 
    <telerik:GridViewColumn.ToolTipTemplate> 
        <DataTemplate> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="{Binding ID}" Foreground="Red" /> 
                <TextBlock Text=" - " /> 
                <TextBlock Text="{Binding Text}" Foreground="Blue" /> 
            </StackPanel> 
        </DataTemplate> 
    </telerik:GridViewColumn.ToolTipTemplate> 
</telerik:GridViewDataColumn> 
Here you can add any arbitrary controls if you want.

You can define the DataTemplate as a StaticResource and then directly assign the ToolTipTemplate property of the GridViewColumn.

ToolTip for a column's Header

In this section it is shown how to set a ToolTip for the header of a column.

Two of the options to do so are:

  • Predefine the HeaderCellStyle for the column. For example:

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"> 
    <telerik:GridViewDataColumn.HeaderCellStyle> 
        <Style TargetType="telerik:GridViewHeaderCell"> 
            <Setter Property="ToolTipService.ToolTip" Value="My very long header"> 
            </Setter> 
        </Style> 
    </telerik:GridViewDataColumn.HeaderCellStyle> 
</telerik:GridViewDataColumn> 

You can define the DataTemplate as a StaticResource and then directly assign the HeaderCellStyle property of the GridViewColumn.

  • Predefine the Header for the column. The code will be similar to this one:

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"> 
    <telerik:GridViewDataColumn.Header> 
        <TextBlock Text="Name" ToolTipService.ToolTip="My very long header"/> 
    </telerik:GridViewDataColumn.Header> 
</telerik:GridViewDataColumn> 
The final result should look like this:

gridview header tooltip

ToolTip for a row

In this section it is shown how to set a ToolTip for GridView's row.

You can define a ToolTip for the rows as follows:

<Style TargetType="telerik:GridViewRow"> 
    <Setter Property="ToolTipService.ToolTip" Value="MyToolTipText"/> 
</Style> 

See Also

In this article
Not finding the help you need? Improve this article