[英]Blazor Bootstrap-5 Hover tooltip does not show up
On a plain html document using bootstrap, i added a field with hover function when hovering over the "info" button, as shown next:在使用引导程序的普通 html 文档上,当悬停在“信息”按钮上时,我添加了一个带有 hover function 的字段,如下所示:
And the full page content of my html page is next:接下来是我的 html 页面的整页内容:
As shown above, the html adds a reference to both bootstrap css, icons (for the info icon) and js and uses a js function to make the tooltip showup on hovering.如上所示,html 添加了对引导程序 css、图标(用于信息图标)和 js 的引用,并使用 js function 在悬停时显示工具提示。
While as shown this perfectly works on a plain html page, it fails in context of a blazor component.虽然如图所示,这在普通的 html 页面上完美运行,但在 blazor 组件的上下文中却失败了。 So in my blazor application i have the _Layout which references the necessary css, js and function as shown below:
所以在我的 blazor 应用程序中,我有 _Layout,它引用了必要的 css、js 和 function,如下所示:
And my blazor razor component page looks like next:我的 blazor razor 组件页面如下所示:
And when i render the page and hover over the info button, the tooltip does not show (this in contrast with the plain html page where it shows up correctly...):当我在信息按钮上渲染页面和 hover 时,工具提示不会显示(这与它正确显示的普通 html 页面形成对比......):
Any clue?有什么线索吗?
Thx for any response.谢谢任何回应。
Emmanuel.伊曼纽尔。
Like @T.Trassoudaine said, when your script executes the component hasn't rendered yet.就像@T.Trassoudaine 所说,当你的脚本执行时,组件还没有渲染。 You need to initialize popovers after the component renders using
OnAfterRenderAsync
lifecycle method.您需要在组件渲染后使用
OnAfterRenderAsync
生命周期方法初始化弹出框。
Change script inside _Layout.cshtml
to this.将
_Layout.cshtml
中的脚本更改为此。 We define a method called enablePopovers
that we'll call later from the component.我们定义了一个名为
enablePopovers
的方法,稍后我们将从组件中调用它。
<script>
window.enablePopovers = function () {
document.querySelectorAll('[data-bs-toggle="popover"]')
.forEach(function (popover) {
new bootstrap.Popover(popover);
});
}
</script>
Now in PopoverTest.razor
add this:现在在
PopoverTest.razor
中添加:
@inject IJSRuntime JS
@* rest of component code *@
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("enablePopovers");
}
}
}
Also check the documentation for more info: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0另请查看文档以获取更多信息: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.