此问题已在此处有答案:
How to make bootstrap tooltip remain visible till the link is clicked(3个答案)
20小时前关闭。
嗨,我一直在寻找关于我的页面的工具提示始终可见的解决方案,并遇到了以下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();
}
}
1条答案
按热度按时间qncylg1j1#
虽然你已经更新了你的标签,并且没有明确说明你的问题:
在Bootstrap 4的文档中,jquery是工具提示运行所必需的:
我们的许多组件都需要使用JavaScript来运行。具体来说,它们需要jQuery、Popper.js和我们自己的JavaScript插件。
在Bootstrap 5的文档中,你可以通过vanilla JS运行show命令: