Hola, estoy trabajando en un sistema de registro de varias páginas y quiero proporcionar información sobre herramientas (SIEMPRE VISIBLE) para cada indicador, como se muestra en mi imagen a continuación.

SIN EMBARGO:

• He notado que cuando creo mi información sobre herramientas usando <span> con Javascript como se muestra a continuación, solo funcionará con el evento de desplazamiento .

• Y cuando lo creo con el new bootstrap.Tooltip() , funcionará según lo previsto siempre que llame a la función .show() como se muestra a continuación en el código.

(Para su información, la primera información sobre herramientas que se muestra en la imagen es en realidad <span> y estoy moviendo el mouse. El bootstrap.Tooltip() tiene display: none solo para el indicador azul. Así que tanto <span> como bootstrap.Tooltip() superposición en caso de display: block )

Algo extraño que también noté es que cuando se crea una información sobre herramientas a través newbootstrap.Tooltip() , se crea un nuevo <div> en la parte superior de la página que tendrá la información del <span> pero no tomará la identificación o nombre de la clase. Tiene su propia identificación que es aleatoria en cada recarga de página (por ejemplo, tooltip768493, tooltip714418, tooltip9188236)

Lo que estoy tratando de averiguar es cómo establecer un nombre de className predeterminado o una id en cada uno de los bootstrap.Tooltip() para que pueda cambiar su título dinámicamente como se muestra a continuación:

• Azul - Estás aquí
• Rojo: faltante o no válido
• Verde - Válido
• Gris - Opcional

Así es como creé los objetivos de información sobre herramientas:

 //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(); } }