C# Blazor WebAssembly TelerikGrid 每行Tooltip重复问题求助

你的问题核心是在Grid列模板内循环创建TelerikTooltip实例，且所有实例使用相同的TargetSelector=".tooltip-target"，导致所有Tooltip最终绑定的是最后一次循环生成的内容（闭包变量捕获问题），同时多个Tooltip实例监听同一选择器会引发冲突。

解决步骤 #

1. 重构列模板：仅保留目标元素并添加数据标识 #

将列模板内的TelerikTooltip移除，只渲染显示的文本元素，并通过data-*属性存储当前行的时间戳，供后续Tooltip读取：

<TelerikGrid class="NewPairsGrid" 
            Data="@Pairs" 
            AutoGenerateColumns="false"       
            RowHeight="15" 
            Height="1000px" 
            Pageable="true"
            PageSize="25"
            Sortable="true">
    <GridColumns>
        <GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px">
            <Template Context="dataItem">
                @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
                {
                    var timestamp = CalculateElapsedTime(ethPairTradeInfoVDto);
                    <!-- 添加data-timestamp属性存储当前行的时间戳 -->
                    <span class="tooltip-target" 
                          data-timestamp="@ethPairTradeInfoVDto.PairCreatedTimeStamp?.ToString("yyyy-MM-dd HH:mm:ss")">
                        @timestamp
                    </span>
                }
            </Template>
        </GridColumn>
        <!-- 其他列... -->
    </GridColumns>
</TelerikGrid>

2. 在Grid外部添加单个Tooltip实例 #

只创建一个TelerikTooltip实例，通过通用选择器.tooltip-target绑定所有目标元素，并在模板中通过触发元素的data-timestamp属性获取对应行的动态内容：

<!-- 放在Grid同级位置 -->
<TelerikTooltip TargetSelector=".tooltip-target" 
                Width="auto" 
                Height="auto" 
                Position="@TooltipPosition.Right">
    <Template Context="tooltipContext">
        @{
            var targetElement = tooltipContext.Target as ElementReference;
        }
        @if (targetElement.Id != null)
        {
            @await RenderTooltipContentAsync(targetElement)
        }
    </Template>
</TelerikTooltip>

3. 实现异步获取数据的渲染方法 #

替换原有的RenderTooltipContent，改为从目标元素的data属性中读取时间戳并渲染：

private async Task<RenderFragment> RenderTooltipContentAsync(ElementReference targetElement)
{
    var timestampStr = await targetElement.GetAttributeAsync("data-timestamp");
    
    return builder =>
    {
        if (!string.IsNullOrEmpty(timestampStr) && DateTime.TryParse(timestampStr, out var timestamp))
        {
            builder.OpenElement(0, "span");
            builder.AddContent(1, $"Pair Timestamp: {timestamp}");
            builder.CloseElement();
        }
        else
        {
            builder.OpenElement(0, "span");
            builder.AddContent(1, "无可用时间戳");
            builder.CloseElement();
        }
    };
}

关键原理 #

• 单个Tooltip实例：避免循环创建多个Tooltip引发的冲突和性能问题
• data属性传递数据：将行级数据绑定到目标元素，Tooltip触发时直接从元素读取，避免闭包变量覆盖问题
• 异步处理：符合Blazor的组件生命周期，避免同步调用异步方法导致的线程阻塞

内容的提问来源于stack exchange，提问作者Jake Gerold