Tooltips

• Aug 21, 2018
• 2 minutes to read

The GridControl allows you to display tooltips (hints) when end-users move the mouse over particular visual elements, such as column headers, band headers, data cells.

• Column and band header tooltips
• Tooltips for trimmed text
• Cell tooltips

Column and band header tooltips

If the BaseColumn.HeaderToolTip property is not specified, a tooltip is displayed for a column (band) header if its caption is clipped. A tooltip contains the text displayed within a column or band header by default.

Custom tooltip text

To specify custom text for the tooltip of an individual column or band, use the BaseColumn.HeaderToolTip property. In this case, the tooltip displays automatically when an end-user hovers the mouse pointer over the column’s header.

XAML

<dxg:GridControl AutoGenerateColumns="None">
    <dxg:GridControl.Columns>
        <!-- A column with a custom header tooltip -->
        <dxg:GridColumn FieldName="Id" HeaderToolTip="Identification Number"/>
        <dxg:GridColumn FieldName="Name" />
        <dxg:GridColumn FieldName="Age" />
    </dxg:GridControl.Columns>
</dxg:GridControl>

Custom tooltip template

Use the BaseColumn.HeaderToolTipTemplate property to specify the tooltip presentation for an individual column. To specify a common tooltip template applied to all columns displayed within a view, use the DataViewBase.ColumnHeaderToolTipTemplate property.

Tooltips for trimmed text

The in-place editor trims the text content when it overflows the content area in display mode.

It does not perform text trimming unless the TextEditSettings.TextWrapping property is set to NoWrap. The template, used to present the content of the tooltip, is specified via the TextEditSettings.TrimmedTextToolTipContentTemplate property.

Cell tooltips

You can define the cell tooltip template for cells:

• within a column (via the BaseColumn.CellToolTipTemplate property);
• within a view (via the DataViewBase.CellToolTipTemplate property).

To define cell tooltips via templates within a column, you need to define the template binding using the BaseColumn.CellToolTipBinding property.

The code sample below demonstrates how to define cell tooltips via templates.

XAML

<dxg:GridControl AutoGenerateColumns="None">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="Id"/>
        <dxg:GridColumn CellToolTipBinding="{Binding}" FieldName="Name">
            <!-- Defines cell tooltip template for the current column -->
            <dxg:GridColumn.CellToolTipTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontWeight="Bold" Text="Name: " />
                            <TextBlock Text="{Binding Name}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontStyle="Italic" FontWeight="Bold" Text="Age: "/>
                            <TextBlock Text="{Binding Age}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dxg:GridColumn.CellToolTipTemplate>
        </dxg:GridColumn>
        <dxg:GridColumn FieldName="Age" />
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView>
            <!-- Defines cell tooltip template for the entire view -->
            <dxg:TableView.CellToolTipTemplate>
                <DataTemplate>
                    <Border Background="LightGray" BorderThickness="0" Padding="10,2">
                        <Label Content="{Binding}" />
                    </Border>
                </DataTemplate>
            </dxg:TableView.CellToolTipTemplate>
        </dxg:TableView>
    </dxg:GridControl.View>
</dxg:GridControl>

Note

The cell tooltip template defined via the DataViewBase.CellToolTipTemplate property is not in effect if the cell tooltip template is defined using the BaseColumn.CellToolTipTemplate property.