Blazor 8交互式服务器模式下MudTooltip滚动后位置异常

这不是你的操作错误，是MudBlazor在InteractiveServer模式下的默认行为限制——服务器端渲染模式下，Tooltip初始渲染时计算位置后，不会自动监听页面滚动事件来更新位置。下面给你两种可行的解决方法：

方法一：指定滚动目标容器 #

直接给MudTooltip添加ScrollTarget属性，指定滚动的容器（整个页面滚动就设为"body"），组件会自动监听该容器的滚动事件并更新位置：

<MudTooltip Text="@Loc["HistoryTooltip"]" Delay="1000" Placement="Placement.Top" ScrollTarget="body">
    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.History" Color="Color.Default" />
</MudTooltip>

方法二：手动监听滚动并刷新位置 #

如果方法一没生效，可以手动监听页面滚动事件，调用Tooltip的刷新方法：

1. 先给Tooltip添加引用：

<MudTooltip @ref="_historyTooltip" Text="@Loc["HistoryTooltip"]" Delay="1000" Placement="Placement.Top">
    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.History" Color="Color.Default" />
</MudTooltip>

2. 在代码块中添加滚动监听和位置刷新逻辑：

private MudTooltip? _historyTooltip;

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        // 监听页面滚动事件，触发时刷新Tooltip位置
        _ = JS.InvokeVoidAsync("addEventListener", "scroll", async () =>
        {
            if (_historyTooltip != null)
            {
                await _historyTooltip.RefreshPositionAsync();
            }
        });
    }
}

注意：如果是局部容器滚动，把"scroll"事件绑定到对应的容器元素上即可，不用绑定到全局。

内容的提问来源于stack exchange，提问作者Drunken Code Monkey