Blazor Bootstrap-5 Hover tooltip does not show up

Question

On a plain html document using bootstrap, i added a field with hover function when hovering over the "info" button, as shown next:

And the full page content of my html page is next:

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.

While as shown this perfectly works on a plain html page, it fails in context of a blazor component. So in my blazor application i have the _Layout which references the necessary css, js and function as shown below:

And my blazor razor component page looks like next:

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 ...):

Any clue ?

Thx for any response.

Emmanuel.

Answer 1

Like @T.Trassoudaine said, when your script executes the component hasn't rendered yet. You need to initialize popovers after the component renders using OnAfterRenderAsync lifecycle method.

Change script inside _Layout.cshtml to this. We define a method called enablePopovers that we'll call later from the component.

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

Now in PopoverTest.razor add this:

@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://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0