Bootstrap tooltip css not working

Question

I am trying to get the tooltip to work, which does btw, but no CSS is applied to the tooltip for reasons unknown. Since the whole site works fine in bootstrap itself (Wordpress plugin), I am scratching my head on this item.

Code is as following.

<a href="tel:<?php echo $phone;  ?>" data-toggle="tooltip" title="<?php echo $phone; ?>"  data-placement="bottom">
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
        <i class="fa fa-phone fa-stack-1x"></i>
    </span> 
</a>

And the JS.

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

The tooltip appears unstyled on the left side of my screen (while it should be below the item) unstyled. My bootstrap plugin is up to date and runs css version (v3.3.6), so I am wondering if there is an external sheet I need to get for the bootstrap tooltip.

It doesnt say: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Answer 1

You must put bootstrap.min.js after jquery-ui.js! Its all.

<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery-ui.js"></script>
<script type="text/javascript" src="path/bootstrap.min.js"></script>

Answer 2

Make sure that bootstrap.js or bootstrap.min.js is is included in your project.

Would you please try the following

Please insert this code of javascript

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

And in Html file add this html part

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>