0
149
VisualizaçõesHow to make bootstrap tooltip always visible in Pure JS?
Hi I was looking for solutions about having the tooltips of my page always visible and came accross the following SO question. However all the solutions provided to this is using JQuery.
Here is the code used to always show the tooltip which I want to convert to JS but I don't know how. I haven't found much documentation about this.
$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');
The JQuery code above seems to be working okay. You can test it here (w3schools).
And Here is my 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>
UPDATE 1:
As per my comment on coll's answer
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 Respostas
Responde à pergunta0
Though you've updated your tags and don't explicitly state which your asking about:
In Bootstrap 4's docs, jquery is required for tooltips to function:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.
In Bootstrap 5's docs, you can run the show command through vanilla JS with:
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
tooltip.show()