Bootstrap - Tooltip is not showing

Question

I have created a new website (it is on a sub-domain atm). However, the tooltip on the text Get the FinEco Bookmarklet is not shown.

<span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the
<br>
<a title="" data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:(function(){ window.open('http://fineconomy.com/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)); })();">FinEco  Bookmarklet</a>
</span>

Any recommendations why?

I appreciate your replies!

Answer 1

We need to initialize tooltip inside $(document).ready(){}) before using it.

Noticed that, from Bootstrap website, they said:

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

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

In your case, please add jQuery('[data-toggle="tooltip"]').tooltip() inside ready() function. It will work.