How to manage dynamically created bootstrap.Tooltip() with vanilla JS?

Question

Hi I'm working on a multi-page registration system and I want to provide a tooltip (ALWAYS VISIBLE) for each indicator as shown in my image bellow.

HOWEVER:

• I have noticed that when I create my tooltips using the <span> with Javascript as shown below, it will only work with hover event.

• And when I create it with new bootstrap.Tooltip() it will work as intended as long as I call the .show() function as shown below in the code.

(FYI, the first tooltip shown in the image is actually the <span> and I'm hovering the mouse. The bootstrap.Tooltip() has style display: none only for blue indicator. So both <span> and bootstrap.Tooltip() overlap in case of display: block)

Something strange that I have also noticed is that when a tooltip is created via newbootstrap.Tooltip() a new <div> is created at the top of the page which will have the information of the <span> but will not take the id or className. It has it's own id which is random on every page reload (e.g. tooltip768493, tooltip714418, tooltip9188236)

What I'm trying to figure out is how to set a default className or id on each of the bootstrap.Tooltip() so that I can change their title dynamically as shown below:

• Blue - You are here
• Red - Missing or Invalid
• Green - Valid
• Grey - Optional

Here is how I created the tooltip targets:

   //in a for loop create 6 spans to hold tooltips:

   //Indicator Progress Span (above bullet with text) 
   span = document.createElement("span");
   span.className = "indicator-tooltip-target";
   span.style.zIndex = "3";
   span.setAttribute("data-toggle","tooltip");
   span.setAttribute("data-original-title", "test");

function show_tooltips(){
    let tooltips_target = document.getElementsByClassName("indicator-tooltip-target");
    for(var i=0; i<tooltips_target.length; i++){
        let tooltip = new bootstrap.Tooltip(tooltips_target[i]);
        tooltip.show();
    }
}