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

Give article feedback