如何使用 vanilla JS 管理动态创建的 bootstrap.Tooltip() ？

Question

您好，我正在开发一个多页面注册系统，我想为每个指示器提供一个工具提示（始终可见），如下图所示。

但是：

• 我注意到，当我使用 和 Javascript 创建工具提示时，如下所示，它仅适用于悬停事件。

• 当我使用 new bootstrap.Tooltip() 创建它时，只要我调用 .show() 函数，它就会按预期工作，如下所示代码。

（仅供参考，图像中显示的第一个工具提示实际上是 ，我将鼠标悬停在上面。bootstrap.Tooltip() 具有样式display: none 仅适用于蓝色指示器，因此 和 bootstrap.Tooltip() 在 display 的情况下重叠： block)

我还注意到一些奇怪的事情是，当通过 newbootstrap.Tooltip() 创建工具提示时，会出现一个新的

在页面顶部创建，它将具有 的信息，但不会采用 id 或 className。它有自己的ID，在每次页面重新加载时都是随机的（例如tooltip768493、tooltip714418、tooltip9188236）

我想弄清楚的是如何设置默认的className或id 在每个 bootstrap.Tooltip() 上，以便我可以动态更改其标题，如下所示：

• 蓝色 - 您在这里
• 红色 - 缺少或无效
• 绿色 - 有效
• 灰色 - 可选

以下是我创建工具提示目标的方法：

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