Hola, estaba buscando soluciones para tener la información sobre herramientas de mi página siempre visible y me encontré con la siguiente pregunta SO . Sin embargo, todas las soluciones proporcionadas a esto utilizan JQuery.

Aquí está el código que se usa para mostrar siempre la información sobre herramientas que quiero convertir a JS pero no sé cómo. No he encontrado mucha documentación al respecto.

 $('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');

El código JQuery anterior parece estar funcionando bien. Puedes probarlo aquí (w3schools) .

Y aquí está mi HTML:

 <span class="span-navigator-above-1" data-toggle="tooltip" data-original-title="Tooltip on top" data-placement="top" style="z-index: 3;"> <div data-title="Event Information" id="progress-bar-indicator-button-1" class="progress-step progress-step-active"></div> </span>

ACTUALIZACIÓN 1:

Según mi comentario sobre la respuesta de coll

 in a loop: { //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"); } later in the code in another loop: { 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(); } }