Problems with bootstrap tooltip in blazor server client

Question

I am trying to get the formatting right for the tooltips but i cant figure out how to. The code below works perfectly:






Bootstrap 4 Tooltip












    Button!

In my blazor server app, I have included the exact same code in the _host.cshtml, but the tooltips doesnt get the right formatting. I am pretty sure that this has to do with the rendering logic, since if I take a tooltip element from one of my routable pages, and places that directly in the _host.cshtml, it works. The question is, how can I get this right in my routable pages.?

Tooltip 'Test1' is the prefered behaviour and that button is implemented directly in the _host.cshtml. 'Test2' is what I am getting if the same button is implemented in a routable page. The tag looks like this:

abc

user_2478013 · Answer

the trick is to load the jquery script from the page method onafterrender. The snippet in the cshtml file is executed to early, so it doesnt work. When adding the jquery code into a separate javascript file and executing that code using ijsruntime.Invokeasync from each page using the onafterrendermethod, it works perfectly.

Javascript:

function addTooltips() {
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
        $(this).tooltip('hide');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
        $(this).tooltip('dispose');
    });
}

Razor:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await js.InvokeVoidAsync("addTooltips");
    }
}

HTML:

user_1041927 · Answer

I came across this thread recently working on my first Blazor app and got stuck trying to get this working with WASM and Bootstrap 5.

Not sure if this is the best way, but the way I found to get it working was to:

Add the Bootstrap bundle to my index.html file
Add a script block with the Bootstrap tooltip code
Took the ideas from the answer by @Henrik and wired it all up.

HTML:

Then in my Blazor component I used the IJSRuntime but had to remove the if:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await Js.InvokeVoidAsync("addTooltips");
}

Problems with bootstrap tooltip in blazor server client

2 Answers