如何为MudBlazor Tooltip应用CSS的display:block属性？

MudBlazor默认的Tooltip hover逻辑是鼠标离开触发元素就立即消失，这就是为啥你用普通CSS的display:block没用——Tooltip本身默认不接收鼠标事件，而且触发逻辑没考虑Tooltip自身的悬停状态。下面是可行的实现方案：

核心思路 #

1. 切换Tooltip到手动触发模式，放弃默认的hover自动控制
2. 给触发元素和Tooltip内容分别绑定鼠标事件，通过定时器判断鼠标是移到Tooltip上还是彻底离开
3. 开启Tooltip内容的鼠标事件支持（默认是禁用的）

完整代码示例 #

Razor组件代码 #

@implements IDisposable

<MudButton @ref="triggerBtn" OnMouseOver="ShowTooltip" OnMouseOut="StartHideTimer">
  悬停查看带链接的提示
</MudButton>

<MudTooltip @ref="tooltipRef" Trigger="TooltipTrigger.Manual" Style="pointer-events: auto;">
  <div OnMouseOver="CancelHideTimer" OnMouseOut="HideTooltip">
    这是带可点击链接的提示：<a href="/target-page" target="_blank">点击跳转</a>
  </div>
</MudTooltip>

@code {
  private MudButton triggerBtn;
  private MudTooltip tooltipRef;
  private System.Timers.Timer hideTimer;

  private void ShowTooltip()
  {
    CancelHideTimer();
    tooltipRef.Show(triggerBtn.Element);
  }

  private void StartHideTimer()
  {
    // 设置150ms延迟，给鼠标移到Tooltip的缓冲时间
    hideTimer = new System.Timers.Timer(150);
    hideTimer.Elapsed += (_, __) => HideTooltip();
    hideTimer.AutoReset = false;
    hideTimer.Start();
  }

  private void CancelHideTimer()
  {
    hideTimer?.Stop();
    hideTimer?.Dispose();
    hideTimer = null;
  }

  private void HideTooltip()
  {
    tooltipRef.Hide();
    CancelHideTimer();
  }

  public void Dispose()
  {
    CancelHideTimer();
  }
}

优化CSS（可选） #

.mud-tooltip {
  /* 确保Tooltip是块级容器，稳定接收鼠标事件 */
  display: block;
  /* 缩小触发元素与Tooltip的间距，避免鼠标移动时触发误隐藏 */
  margin-top: 3px;
}

关键细节说明 #

• pointer-events: auto;：必须给Tooltip加上这个，否则鼠标移到Tooltip上也不会触发任何事件，定时器仍会执行隐藏
• 150ms延迟：给鼠标从触发元素移到Tooltip的缓冲时间，避免快速移动时误触发隐藏
• 手动触发模式：只有用Manual模式，才能完全脱离默认hover逻辑，自主控制Tooltip的显示/隐藏时机

内容的提问来源于stack exchange，提问作者Anna Holzheuser