Angular - apply bootstrap 5 tooltip to dynamically created element

Issue

we have an Angular-14 application using Bootstrap-5 that I am trying add a tooltip to an element that is being created after the page is loaded

The new element is based on an existing element as follows

<span [ngbTooltip]="tipSEContent" tooltipClass="tooltip-whiteBG" autoClose="true" container="body" tabindex="0" ngbTooltip="Click to sort">Standard Error</span>

I have an event that is fired when the element is created - (as taken from https://www.geeksforgeeks.org/bootstrap-5-tooltips-getorcreateinstance-method/) the code that is run on creation is as follows

var tooltipInstance = bootstrap.Tooltip.getOrCreateInstance(item);

This seems to create the instance however doesn't create the desired hover/mouseover effect - if I add a "title" tag to the element however the tooltip does look like it tries to create the tooltip (a tooltip box appears as a black rectangular box, unstyled)

So it would seem bootstrap.Tooltip.getOrCreateInstance(item) kind-of works but is intended for raw HTML - it doesn't honour the Angular specific tags (eg. "ngbTooltip")

Is there an Angular equivalent call that can be executed here that does honour the tags "ng" tags ?

Solution

For dynamic controls I finished up using the raw Bootstrap 5 approach as in:

HTML:

<a class='...' target='_blank' href='...' data-bs-toggle='tooltip' data-bs-placement='auto' data-bs-custom-class='...' data-bs-title='...'>...</a>

Javascript:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new Tooltip(tooltipTriggerEl)
})

Answered By - TerrorBight