C#•13mo ago

Blazor JS Interop - Bootstrap 5 Tooltip

Hey. I want to use the Bootstrap 5 Tooltip on divs. i have a site.js that has this func

function tooltip(id) {
    var element = document.getElementById(id);
    var tooltip = new bootstrap.Tooltip(element, {});
}

function tooltip(id) {
    var element = document.getElementById(id);
    var tooltip = new bootstrap.Tooltip(element, {});
}

my blazor looks like this

<div id="submit" data-bs-toggle="tooltip" data-bs-title="Submit your data!">
  <MyPrimaryButton OnClick="Submit">@Localizer["Submit"]</MyPrimaryButton>
</div>

<div id="submit" data-bs-toggle="tooltip" data-bs-title="Submit your data!">
  <MyPrimaryButton OnClick="Submit">@Localizer["Submit"]</MyPrimaryButton>
</div>

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if(firstRender)
  {
       await JSRuntime!.InvokeVoidAsync("tooltip", "submit");
  }
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if(firstRender)
  {
       await JSRuntime!.InvokeVoidAsync("tooltip", "submit");
  }
}

if i put alerts in the JS, those get triggered. but the tooltip doesnt render. any ideas?

5 Replies

PontiacGTX•13mo ago

what does it show when you print console.log(new bootstrap(element,{})) if nothign or an error maybe the order the scripts are included matter

abcOP•13mo ago

thats a good debug idea

abcOP•13mo ago

abcOP•13mo ago

this may be the problem but idk how to fix it something is rendering, because the vscroll gets bigger but i cant tell what its rendering in the bottom left corner what the fuc

Gaming

Programming

Blazor JS Interop - Bootstrap 5 Tooltip