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

MudTooltip光标移开后未消失问题求助(Blazor/.NET 8环境)

问题分析与解决方案

是否为MudBlazor Bug?

是的,这属于MudTooltip组件在处理跨标签页焦点切换或鼠标事件未正确捕获时的已知问题(在部分MudBlazor版本中存在)。当右键打开新标签页时,原页面的mouseleave事件不会被浏览器触发,导致Tooltip的状态未更新,停留在显示状态;左键点击的情况同理,可能是组件未正确处理点击后的状态重置。

临时修复方案

方案1:监听窗口焦点事件,强制关闭Tooltip

在组件中注入IJSRuntime,监听窗口focus事件,页面重新获得焦点时强制关闭Tooltip:

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<MudTooltip @ref="_tooltipRef" Text="菜单操作">
    <MudIcon Icon="@Icons.Material.Filled.Menu" />
</MudTooltip>

@code {
    private MudTooltip? _tooltipRef;
    private IJSObjectReference? _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/tooltipFix.js");
            await _jsModule.InvokeVoidAsync("listenForWindowFocus", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public void CloseTooltipOnFocus()
    {
        _tooltipRef?.Hide();
    }

    public async ValueTask DisposeAsync()
    {
        if (_jsModule is not null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

在wwwroot/scripts/tooltipFix.js中添加:

export function listenForWindowFocus(dotNetRef) {
    window.addEventListener('focus', () => {
        dotNetRef.invokeMethodAsync('CloseTooltipOnFocus');
    });
}

方案2:绑定点击事件主动关闭Tooltip

给Tooltip的目标元素绑定点击事件,触发时强制关闭Tooltip:

<MudTooltip @ref="_tooltipRef" Text="菜单操作">
    <MudIcon Icon="@Icons.Material.Filled.Menu" @onclick="() => _tooltipRef?.Hide()" />
</MudTooltip>

@code {
    private MudTooltip? _tooltipRef;
}

方案3:调整AutoClose与CloseDelay属性

显式设置AutoClose="true"(默认值)并调整CloseDelay,部分场景下可缓解问题:

<MudTooltip Text="菜单操作" AutoClose="true" CloseDelay="100">
    <MudIcon Icon="@Icons.Material.Filled.Menu" />
</MudTooltip>

永久修复方案

  1. 升级MudBlazor版本:检查MudBlazor最新稳定版(如6.20+),官方可能已修复焦点事件处理的问题,升级后验证是否解决。
  2. 提交官方Issue:若升级后问题仍存在,可在MudBlazor仓库提交Issue,提供环境信息(.NET 8、Chrome版本、MudBlazor 6.18.0)和复现步骤,官方会跟进处理。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.06.27 07:18:24