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>
永久修复方案
- 升级MudBlazor版本:检查MudBlazor最新稳定版(如6.20+),官方可能已修复焦点事件处理的问题,升级后验证是否解决。
- 提交官方Issue:若升级后问题仍存在,可在MudBlazor仓库提交Issue,提供环境信息(.NET 8、Chrome版本、MudBlazor 6.18.0)和复现步骤,官方会跟进处理。
内容的提问来源于stack exchange,提问作者Alex Huynh
相关产品推荐
相关产品推荐

