Bootstrap 4 Tooltips

Question

I am using Bootstrap 4 for creating tooltips on my web page. But somehow the tooltip is not working properly. Below is the code for the same:

<a href="#reserve-table" class="btn btn-warning" role="button" data-toggle="tooltip" data-html="true" data-placement="top" title="or Call us at<br><strong>+852 1234 5678</strong>">Reserve Table</a>

I have included the below files:

bootstrap.min.js
bootstrap.min.css

I have also activated the tooltip with the following js code:``

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

Can someone help with this? This is how the tooltip looks on my web page. Tooltip on webpage

Answer 1

If the goal is to have the tooltip display on the page when ready you could use the: .tooltip('show') or .tooltip('toggle') to bypass the default hover trigger.

There are more javascript options for tooltips from here: https://getbootstrap.com/docs/4.5/components/tooltips/#options

Answer 2

Try adding a nav-link class along with btn and btn-warning. Also make sure all the JS files are in order ie first you have jquery than popper and bootstrap.min.js at last.