如何使引导工具提示在纯 JS 中始终可见？

Question

您好，我正在寻找有关使页面的工具提示始终可见的解决方案，并遇到了以下问题 所以问题。然而，为此提供的所有解决方案都是使用 JQuery。

这是用于始终显示工具提示的代码，我想将其转换为 JS，但我不知道如何转换。我还没有找到太多关于此的文档。

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

上面的 JQuery 代码似乎工作正常。您可以在此处 (w3schools) 进行测试。

这是我的 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>

---

更新 1：

根据我对 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();
   }
}

Answer 1

尽管您已经更新了标签并且没有明确说明您的询问：

在 Bootstrap 4 的文档，工具提示需要 jquery 才能发挥作用：

我们的许多组件都需要使用 JavaScript 才能运行。
具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript
插件。

在 Bootstrap 5 的文档中，您可以通过 vanilla JS 运行 show 命令： :

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
tooltip.show()