You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在MudBlazor表格行模板上应用MudTooltip?

给MudBlazor表格行添加MudTooltip的可行方案

给整行添加MudTooltip完全可行,你之前遇到的列布局问题是因为包裹方式不对,下面提供两种可靠的实现方式:

方案一:直接用MudTooltip包裹整行(最简便)

保持表格原有行结构,将MudTr整体放在MudTooltip的ChildContent中,这样整行任何位置都能触发提示,且不会破坏列布局:

<MudTable Items="@sampleData">
    <HeaderContent>
        <MudTh>名称</MudTh>
        <MudTh>数值</MudTh>
        <MudTh>状态</MudTh>
    </HeaderContent>
    <RowTemplate Context="item">
        <!-- 用Tooltip包裹整行 -->
        <MudTooltip Text="@($"行详情:{item.Name} | 数值:{item.Value}")">
            <MudTr>
                <MudTd>@item.Name</MudTd>
                <MudTd>@item.Value</MudTd>
                <MudTd>@item.Status</MudTd>
            </MudTr>
        </MudTooltip>
    </RowTemplate>
</MudTable>

@code {
    private List<SampleItem> sampleData = new()
    {
        new SampleItem { Name = "项目A", Value = 123, Status = "正常" },
        new SampleItem { Name = "项目B", Value = 456, Status = "异常" }
    };

    public class SampleItem
    {
        public string Name { get; set; }
        public int Value { get; set; }
        public string Status { get; set; }
    }
}

方案二:手动控制Tooltip显示(复杂场景适配)

如果需要自定义触发逻辑或提示内容,可以通过行的鼠标事件手动控制Tooltip的显示状态:

<MudTable Items="@sampleData">
    <HeaderContent>
        <MudTh>名称</MudTh>
        <MudTh>数值</MudTh>
    </HeaderContent>
    <RowTemplate Context="item">
        <MudTr @onmouseover="() => ShowRowTooltip(item)" @onmouseout="HideRowTooltip">
            <MudTd>@item.Name</MudTd>
            <MudTd>@item.Value</MudTd>
        </MudTr>
    </RowTemplate>
</MudTable>

<!-- 全局Tooltip,根据行数据动态更新内容 -->
<MudTooltip @bind-Visible="_isTooltipVisible" Text="@_tooltipContent" />

@code {
    private List<SampleItem> sampleData = new()
    {
        new SampleItem { Name = "项目X", Value = 789 },
        new SampleItem { Name = "项目Y", Value = 012 }
    };

    private bool _isTooltipVisible;
    private string _tooltipContent;

    private void ShowRowTooltip(SampleItem item)
    {
        _tooltipContent = $"当前行:{item.Name},数值为{item.Value}";
        _isTooltipVisible = true;
    }

    private void HideRowTooltip()
    {
        _isTooltipVisible = false;
    }

    public class SampleItem
    {
        public string Name { get; set; }
        public int Value { get; set; }
    }
}

关于你之前的问题说明

你尝试包裹MudTd导致列挤在一起,是因为MudTooltip默认是内联元素,直接包裹单个MudTd会破坏表格的列结构,或者错误地将多个MudTd放在同一个Tooltip里却没有保留MudTr的行容器,导致表格布局失效。只要保持MudTr作为行的容器,再用Tooltip包裹整个行,就能避免这个问题。

内容的提问来源于stack exchange,提问作者user21223690

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 23:45:23