如何在MudDataGrid中为列标题添加悬浮提示（Tooltip）？

要给MudDataGrid的列标题加悬浮提示，核心是通过自定义列的HeaderTemplate来嵌套MudTooltip组件，以下是两种常见场景的具体实现：

1. 静态列（手动定义列） #

直接在列的HeaderTemplate中包裹MudTooltip，将标题文本放在Tooltip内部：

<MudDataGrid T="User" Items="@userList">
    <Columns>
        <MudDataGridColumn T="User" Property="UserName" Sortable="true">
            <HeaderTemplate>
                <MudTooltip Text="用户登录账号，唯一标识">
                    <MudText>用户名</MudText>
                </MudTooltip>
            </HeaderTemplate>
        </MudDataGridColumn>
        <MudDataGridColumn T="User" Property="Email" Sortable="true">
            <HeaderTemplate>
                <MudTooltip Text="用户绑定的邮箱，用于接收通知">
                    <MudText>邮箱</MudText>
                </MudTooltip>
            </HeaderTemplate>
        </MudDataGridColumn>
    </Columns>
</MudDataGrid>

@code {
    private List<User> userList = new()
    {
        new User { UserName = "john_doe", Email = "john@example.com" },
        new User { UserName = "jane_smith", Email = "jane@example.com" }
    };

    public class User
    {
        public string UserName { get; set; }
        public string Email { get; set; }
    }
}

2. 动态列（从数据源生成列） #

如果列是动态生成的，只需在循环创建列时，给每个列的HeaderTemplate注入对应的提示文本：

<MudDataGrid T="Product" Items="@productList">
    <Columns>
        @foreach (var col in columnConfigs)
        {
            <MudDataGridColumn T="Product" Property="@col.PropertyName" Sortable="col.IsSortable">
                <HeaderTemplate>
                    <MudTooltip Text="@col.Tooltip">
                        <MudText>@col.DisplayName</MudText>
                    </MudTooltip>
                </HeaderTemplate>
            </MudDataGridColumn>
        }
    </Columns>
</MudDataGrid>

@code {
    private List<Product> productList = new()
    {
        new Product { Id = 1, Name = "笔记本", Price = 4999 },
        new Product { Id = 2, Name = "手机", Price = 2999 }
    };

    private List<ColumnConfig> columnConfigs = new()
    {
        new ColumnConfig { PropertyName = "Id", DisplayName = "商品ID", Tooltip = "商品唯一编号", IsSortable = true },
        new ColumnConfig { PropertyName = "Name", DisplayName = "商品名称", Tooltip = "商品的展示名称", IsSortable = true },
        new ColumnConfig { PropertyName = "Price", DisplayName = "价格", Tooltip = "商品的售价（元）", IsSortable = true }
    };

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }

    public class ColumnConfig
    {
        public string PropertyName { get; set; }
        public string DisplayName { get; set; }
        public string Tooltip { get; set; }
        public bool IsSortable { get; set; }
    }
}

注意事项 #

• 不要直接使用列的HeaderText属性添加提示，因为HeaderText仅支持纯文本，无法嵌套组件；必须通过HeaderTemplate实现组件嵌套
• 可以通过MudTooltip的Placement属性调整提示框的显示位置（如Top、Bottom、Left等），也可以用Class自定义样式
• 确保项目已正确引入MudBlazor的依赖（服务注册、样式引用），否则Tooltip可能无法正常渲染

内容的提问来源于stack exchange，提问作者ashish rathore