Blazor 8 MudBlazor 滚动页面后工具提示 Y 位置不正确

Question

我对以下 MudTooltip 有疑问：

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

工具提示显示，但如果我滚动页面，它仅显示在原始位置，而不是滚动后的新位置...这是在 InteractiveServer 模式下。

我做错了什么，或者遗漏了什么吗？我不是唯一遇到过这个问题的人...

Answer 1

您遇到的 MudTooltip 在滚动后未更新其位置的问题可能是由于工具提示在页面上的定位方式造成的。工具提示通常根据其初始渲染位置使用绝对定位，这可能会导致您在某些场景中描述的行为。

可能的解决方案

1. 检查 MudBlazor 中的更新 确保您使用的是最新版本的 MudBlazor。旧版本可能存在错误或缺乏正确处理工具提示重新定位的功能。更新 MudBlazor 并再次测试。

2. 在滚动上启用工具提示重新定位 当页面滚动时，MudBlazor 工具提示应自动重新定位。但是，在某些情况下，尤其是在 InteractiveServer 模式下，此行为可能需要手动调整。要强制工具提示在滚动后重新计算其位置，您可能需要触发重新渲染或确保其配置正确。

3. 使用 CSS 或 JavaScript 的解决方法 如果上述方法不能解决问题，您可以通过解决方法确保正确的工具提示定位：

CSS 方法：避免工具提示受到滚动的影响。使用位置：在工具提示容器的自定义 CSS 中固定。

JavaScript 方法：使用 JavaScript 互操作来通知 MudBlazor 重新定位滚动上的工具提示。例如，您可以监听滚动事件并触发重新渲染或重新定位功能。

4. 替代 MudTooltip 设置 尝试调整 MudTooltip 设置以查看它们是否影响行为：

使用自动关闭或确保工具提示动态更新。 尝试延迟、放置和偏移，以尽量减少潜在的冲突。 5. 回退到自定义工具提示 如果问题仍然存在并且无法使用 MudBlazor 的内置工具提示解决，您可以使用基本 HTML 和 CSS 实现自己的工具提示以获得更多控制。