'I How to make a static tooltip in bootstrap 4

On the Bootstrap web site there's a demonstration for static tooltips, I've copied the html generated to replicate the tooltip in my project but it didn't work. Even though Bootstrap 4 is in development, the documentation could be much better. static tooltip

I've tried 

<div  class="tooltip tooltip-right" role="tooltip"> <div class="tooltip-inner"> veicle code </div></div>

I added

Obs: The dynamic examples work.

jquerytooltipbootstrap-4


Solution 1:[1]

You can try with Event Listeners that you can find on the Bootstrap Documentation.

<div class="container">

     <button id="myStaticTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Static Tooltip">
       Test
    </button>

</div>

And with this Jquery code :

$(function () {
  $('#myStaticTooltip').tooltip('toggle')
  $('#myStaticTooltip').on('hide.bs.tooltip', function () { return false;});
  $('#myStaticTooltip').on('show.bs.tooltip', function () { return false;});
})

Hope it can help.

Solution 2:[2]

You could insert also JS code in page like this:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

and div could have this attribute 

data-toggle="tooltip" data-placement="top" title="Tooltip on top"

Solution 3:[3]

If the goal is to show a tooltip, and make it always visible:

For anyone getting here working with more recent versions of Bootstrap, on Bootstrap 5 you can just define the trigger as manual, and all mouse events will be ignored. Then, just show the tooltip when you want, and it will stay there (until you remove it using Javascript).

Example tooltip (using bootstrap 5):

<button id="example" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" data-bs-trigger="manual">
  Example tooltip on button
</button>

Javascript:

var exampleBtn = document.getElementById('example');
var tooltip = new bootstrap.Tooltip(exampleBtn);
tooltip.show();

Solution 4:[4]

You could try with this following code:

<div class="bd-example-tooltip-static">
    <div class="tooltip tooltip-top" role="tooltip">
        <div class="tooltip-inner">Tooltip on the top</div>
    </div>
    <div class="tooltip tooltip-right" role="tooltip">
       <div class="tooltip-inner">Tooltip on the right</div>
    </div>
    <div class="tooltip tooltip-bottom" role="tooltip">
        <div class="tooltip-inner">Tooltip on the bottom</div>
    </div>
    <div class="tooltip tooltip-left" role="tooltip">
       <div class="tooltip-inner">Tooltip on the left</div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Clément Canuto
Solution 3 Miguel Rebocho
Solution 4 Andrea Radice

Related Questions