Bootstrap tooltip not working though tried answers from stackoverflow

Question

I tried all the solutions mentioned in stackoverflow and nothing works for me.

Head section as

<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
$('[data-toggle="tooltip"]').tooltip();
</script>

and in html

<div class="odd-row">
   <strong>10, 000</strong> 
       <a href="#" data-toggle="tooltip" title="Some tooltip text!">Datapoints</a>
   <i class="fa fa-plus-circle"></i>
</div>

in the bottom of the page (for performance reason) I included the other files

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.js">   </script>   
<script type="text/javascript" src="js/retina.js"></script> 

Still the tooltip is not working!! Please help me.

Answer 1

You code is works for me.

Probably something wrong with structure of your html or some error in other part of JS.

Also you can try to put your code in document ready function.

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

Is this what you want? Try demo: http://jsfiddle.net/jdbNa/

Answer 2

For bootstrap you have to put jquery before you put bootstrap.js; so if you're putting bootstrap.js in the header you have to put the jquery.js before it.

Have you tried putting everything on the bottom before the closing body tag? maybe that would work. (I'm on stackoverflow looking for a tooltip solution myself to an issue I'm having)

Maybe try putting bootstrap.js after jquery.min.js, then below the retina.js, put your script to activate the tooltips.