Blazor Bootstrap-5 悬停工具提示不显示答案

【问题标题】：Blazor Bootstrap-5 Hover tooltip does not show upBlazor Bootstrap-5 悬停工具提示不显示
【发布时间】：2022-08-20 02:15:29
【问题描述】：

在使用引导程序的纯 html 文档上，当悬停在“信息”按钮上时，我添加了一个具有悬停功能的字段，如下所示：

接下来是我的 html 页面的完整页面内容：

如上所示，html 添加了对 bootstrap css、图标（用于信息图标）和 js 的引用，并使用 js 函数使工具提示在悬停时显示。

虽然如图所示，这在纯 html 页面上完美运行，但在 blazor 组件的上下文中却失败了。所以在我的 blazor 应用程序中，我有 _Layout，它引用了必要的 css、js 和函数，如下所示：

我的 blazor razor 组件页面如下所示：

当我渲染页面并将鼠标悬停在信息按钮上时，工具提示不显示（这与它正确显示的纯 html 页面形成对比......）：

有什么线索吗？

谢谢任何回应。

伊曼纽尔。

您的 JS 代码在第一次渲染时执行一次：当执行 JS 初始化代码时，我们不知道 HTML 元素是否已经被渲染。如果重新渲染 HTML 元素，也会出现同样的问题。如果要在 JS 中对 HTML 元素执行一些初始化代码，可以在剃须刀页面的 OnAfterRenderAsync() 中使用 JSInterop.IJSRuntime。

标签： c# html razor blazor bootstrap-5

【解决方案1】：

就像@T.Trassoudaine 所说，当你的脚本执行时，组件还没有渲染。您需要在组件渲染后使用 OnAfterRenderAsync 生命周期方法初始化弹出框。

将_Layout.cshtml 中的脚本更改为此。我们定义了一个名为enablePopovers 的方法，稍后我们将从组件中调用它。

<script>
    window.enablePopovers = function () {
        document.querySelectorAll('[data-bs-toggle="popover"]')
            .forEach(function (popover) {
                new bootstrap.Popover(popover);
            });
    }
</script>

现在在PopoverTest.razor 中添加：

@inject IJSRuntime JS

@* rest of component code *@

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("enablePopovers");
        }
    }
}

【讨论】：