ToolTip in MAUI DataGrid (SfDataGrid)

8 Sep 202510 minutes to read

The SfDataGrid provides support for displaying tooltips. ToolTip provides the support to show the pop-up window that displays the information when interacting with cells of SfDataGrid.

To show tooltips:

• On Windows/Mac: Hover the mouse cursor over any cell in the grid
• On Android/iOS: Long press on any cell in the grid

Show tooltip in a header and record cell

To enable tooltip for datagrid, set the SfDataGrid.ShowToolTip property to true. This will display tooltip containing cell content when users interact with the cells.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                              ItemsSource="{Binding OrdersInfo}"
                              ShowToolTip="True" />

C#

this.dataGrid.ShowToolTip = true;

You can enable tooltips for specific columns by setting the DataGridColumn.ShowToolTip property to true for the desired columns.

XAML

<syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridTextColumn HeaderText="Order ID" 
                                       MappingName="OrderID" 
                                       ShowToolTip="True"/>
        <syncfusion:DataGridTextColumn HeaderText="Customer ID" 
                                       MappingName="CustomerID" 
                                       ShowToolTip="True"/>
    </syncfusion:SfDataGrid.Columns>

C#

dataGrid.Columns.Add(new DataGridTextColumn()
{
    HeaderText = "Order ID",
    MappingName = "OrderID",
    ShowToolTip = true
});

dataGrid.Columns.Add(new DataGridTextColumn()
{
    HeaderText = "Customer ID",
    MappingName = "CustomerID",
    ShowToolTip = true
});

NOTE

The DataGridColumn.ShowToolTip property takes higher priority than the SfDataGrid.ShowToolTip property.

ToolTip Customization

You can customize the appearance of the tooltip in the MAUI SfDataGrid using either implicit styles or default style properties. Below are two approaches to achieve this:

Apply Implicit Style

You can define an implicit style in the ContentPage.Resources section by targeting the DataGridToolTipView. This allows you to customize various visual aspects of the tooltip such as Background, TextColor, FontAttributes, FontFamily, and FontSize.

To change the tooltip’s border appearance, use the Stroke and StrokeThickness properties within the implicit style.

• Stroke: Sets the border color of the tooltip.
• StrokeThickness: Defines the thickness of the tooltip border.

XAML

<ContentPage.Resources>
        <Style TargetType="syncfusion:DataGridToolTipView">
            <Setter Property="Background" Value="AliceBlue" />
            <Setter Property="Stroke" Value="Red" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="TextColor" Value="Brown" />
        </Style>
    </ContentPage.Resources>

Apply Default Style

You can apply basic tooltip styling using the DefaultStyle property of SfDataGrid. This method supports only background and text color customization.

XAML

<syncfusion:SfDataGrid.DefaultStyle>
                <syncfusion:DataGridStyle ToolTipBackground="Red" ToolTipTextColor="White" />
            </syncfusion:SfDataGrid.DefaultStyle>

Load views to the Tooltip

Customizing the ToolTip using DataTemplate

You can customize the appearance and content of tooltips by setting the SfDataGrid.ToolTipTemplate property.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid" 
                               ItemsSource="{Binding Orders}"
                               ShowToolTip="True">

            <syncfusion:SfDataGrid.ToolTipTemplate>
                <DataTemplate>
                    <Image Height="100" Width="100" Source="{Binding Customer,Converter={StaticResource ImageConverter}}" />
                </DataTemplate>
            </syncfusion:SfDataGrid.ToolTipTemplate>

        </syncfusion:SfDataGrid>

Customizing the ToolTip with DataTemplateSelector

You can load different tooltip templates conditionally based on cell data by using a DataTemplateSelector with the SfDataGrid.ToolTipTemplate property.

XAML

<ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="Default">
                <Border Stroke="Black" StrokeThickness="2">
                    <Label Text="{Binding OrderID}" Background="Red" TextColor="White" Padding="2" />
                </Border>                
            </DataTemplate>
            <DataTemplate x:Key="Alternative">
                <Border Stroke="Black" StrokeThickness="2" >
                    <Label Text="{Binding OrderID}" Background="ForestGreen" TextColor="Black" Padding="2" />
                </Border>
            </DataTemplate>
        </ResourceDictionary>    
    </ContentPage.Resources>
    
    <ContentPage.Content>
        <syncfusion:SfDataGrid x:Name="dataGrid" 
                               ItemsSource="{Binding Orders}"
                               ShowToolTip="True">

            <syncfusion:SfDataGrid.ToolTipTemplate>
                <local:ToolTipTemplateSelector AlternateTemplate="{StaticResource Alternative}" DefaultTemplate="{StaticResource Default}" />
            </syncfusion:SfDataGrid.ToolTipTemplate>

        </syncfusion:SfDataGrid>
    </ContentPage.Content>

C#

public class ToolTipTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate AlternateTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is OrderInfo employee)
        {
            if (employee.OrderID % 2 == 0)
            {
                return AlternateTemplate;
            }
            else
            {
                return DefaultTemplate;
            }
        }

        return DefaultTemplate;
    }
}

The below image refers the DefaultTemplate which is applied through ToolTipTemplate.

The below image refers the AlternateTemplate which is applied through ToolTipTemplate.

Events

CellToolTipOpening event

The CellToolTipOpening event is raised when a tooltip is about to be displayed for a cell. The event provides DataGridCellToolTipOpeningEventArgs which contains the following properties:

• Column: Gets the GridColumn of the cell for which the tooltip is being shown.
• RowData: Gets the data associated with a specific row.
• RowColumnIndex: Gets the row and column index of the cell.
• ToolTipText: Gets the text content that is displayed within the tooltip.
• Cancel: Gets or sets a value indicating whether the tooltip should be displayed. Set to true to prevent the tooltip from showing.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                      ItemsSource="{Binding OrdersInfo}"
                      ShowToolTip="True"
                      CellToolTipOpening="DataGrid_CellToolTipOpening">
</syncfusion:SfDataGrid>

C#

dataGrid.CellToolTipOpening += DataGrid_CellToolTipOpening;

private void DataGrid_CellToolTipOpening(object sender, DataGridCellToolTipOpeningEventArgs e)
{

}