bootstrap: Uncaught TypeError: Object [object Object] has no method 'tooltip', 'typeahead'

Question

I am trying to use the tooltip, typeahead, datepicker features of bootstrap. But I keep getting these errors in the console!

Uncaught TypeError: Object [object Object] has no method 'tooltip'
Uncaught TypeError: Object [object Object] has no method 'typeahead'

This is how my imports look like:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.dropdown.css" />
<script type="text/javascript" src="js/jquery.dropdown.js"></script>

Some sample code:

<a class="btn btn-success" data-toggle="modal" href="#payments"
           rel="tooltip" data-placement="top" title="Record your payments">
            <i class="icon-check icon-white"></i> Payments</a>

$("#payments").tooltip('show');

Similarly I have code for datepicker and typeahead.

any solution?

EDIT:

This is what I tried just now:

<a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Test</a>

<script type="text/javascript">
$(function() {
    $("#").tooltip().tooltip('show');
});
</script>

But still no success. It does show the tooltip text when I hover over Test but the it is of the pre-historic times. Not like the ones shown on bootstrap example pages. Not cool.

So now can anyone tell where am I going wrong?

Answer 1

I just ran into this problem and my issue was that I was accidentally including jQuery twice.