Bootstrap tooltip doesn't show style of the tooltip, only data

Question

Trying to make Bootstrap show the tooltip function, I have followed exactly as Bootstrap DOC about Tooltips and declare my attribute and properties. when I hover over the text t

Answer 1

This question has been sufficiently answered, but the solutions don't apply; my links were in good order. Turns out that there's a conflict with Font Awesome (FA). For example, this wouldn't work for me:

<span class="fas fa-search" data-toggle="tooltip" title="Search my site"></span>

If I remove the FA classes, and enter text within the span, the tooltips render in the proper style... but isn't a good solution. However, by encapsulating that span within another span does work:

<span data-toggle="tooltip" title="Search my site"><span class="fas fa-search"></span></span>

I hope this helps the odd soul out there. Or two :^)

Answer 2

Try adding this code at the bottom of your HTML i've needed it to trigger the tooltip to work. Add class="ttop" to your tooltips in HTML code.

$(document).ready(function(){
$(".ttop").tooltip({
    placement : 'top'
});
});

Answer 3

In my case using AngularJS, even all css/js scripts were sequenced/invoked properly but still wasn't showing.

The issue was it's under from a tag with "ng-if" attribute. After I placed it outside from that tag It works fine.

Maybe there's a slight delay with AngularJS rendering the elements with "ng-if" while jquery is initialising the tooltip.

Answer 4

make sure if you add bootstrap.min.js and also add

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

Answer 5

You must initialize tooltip like:

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