22

I want to use the Bootstrap popover, but I keep getting this error in firebug:

TypeError: $(...).popover is not a function

This is how I load it all:

  <a id="example" class="btn btn-success" data-original-title="Twitter Bootstrap Popover" data-content="It's so simple to create a tooltop for my website!" rel="popover" href="#">abc</a>


  <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/jquery-1.9.0.js"></script>

  <script>
     setTimeout(function (){ $("#example").popover("show");},4000);
  </script>';
7
  • 11
    jQuery has to come before the Bootstrap support script. Commented Apr 10, 2013 at 17:31
  • 1
    Same issue, even with jquery first
    – John Doe
    Commented Apr 10, 2013 at 17:33
  • 1
    Are all of the JavaScript files loaded correctly? Commented Apr 10, 2013 at 17:35
  • I will try with full path, but all are shown as included in dreamweaver aswell
    – John Doe
    Commented Apr 10, 2013 at 17:36
  • 5
    Found the issue, sorry for the stupid question, had another version of Jquery sneaking itself in at the end of the page
    – John Doe
    Commented Apr 10, 2013 at 17:38

2 Answers 2

28

This is what worked for me, I changed the order of jQuery and bootsrap libraries. Also, I am using the libraries from a CDN. That should make no difference.

<a id="example" class="btn btn-success" data-original-title="Twitter Bootstrap Popover" data-content="It's so simple to create a tooltop for my website!" rel="popover" 

href="#">abc</a>


  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  <script src="http:////cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


  <script>
     setTimeout(function (){ $("#example").popover("show");},4000);
  </script>
2
  • If we use separate bootstrap plugin should be in order. Otherwise it get conflicts. Either should use minified or bootstrap all.js
    – Kannan S
    Commented Mar 1, 2016 at 11:34
  • 1
    Important that the script is loaded after the body :)
    – jobbert
    Commented May 4, 2016 at 8:09
-7
<a id="example" class="btn btn-success" data-original-title="Twitter Bootstrap Popover" data-content="It's so simple to create a tooltop for my website!" rel="popover" href="#">abc</a>
  <script>
     setTimeout(function (){ $("#example").popover("show");},4000);
  </script>
  <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/jquery-1.9.0.js"></script>
4
  • That just made it a different error! Using $ before jQuery is used. Commented Apr 10, 2013 at 17:33
  • you need jquery ready statement $(function(){ //code goes here.. to make sure that html is loaded }):
    – master
    Commented Apr 10, 2013 at 17:38
  • this is a very duck tape approach Commented Oct 12, 2015 at 10:23
  • makes another Error.
    – MRebati
    Commented Jan 22, 2017 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.