如何使 bootstrap 工具提示在 Pure JS 中始终可见？

Question

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

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

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

上面的 JQuery 代码似乎工作正常。你可以测试一下here (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：

根据我对科尔回答的评论

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's docs 中，工具提示功能需要 jquery：

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

在 Bootstrap 5's docs 中，您可以运行通过原始 JS 显示命令：

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

如何使 bootstrap 工具提示在 Pure JS 中始终可见？

How to make bootstrap tooltip always visible in Pure JS?

html

javascript

tooltip

bootstrap-4

bootstrap-5