I'm dealing with a problem that obviously a lot of people run into considering the amount of articles I've read and tried. However, none of these helped me actually solve the problem so I hope someone here has solution for this, I guess, simple problem.

For a Magento 1.8 installation I have developed a category grid that automatically renders a 3 column category layout based upon the main category. Then I implemented the Bootstrap Popover functionality accordingly:

  • Added jQuery.min.js
  • Added the Bootstrap.min.js

And used the following code to use in my grid:

         trigger: 'manual',
         animate: false,
         html: true,
         template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
      }).click(function(e) {
      e.preventDefault() ;
      }).mouseenter(function(e) {

I developed this on a dev site and everything worked perfectly. I then tried to implement this into my live site and ran into problems. I'm stuck at the following error:

TypeError: undefined is not a function (evaluating 'jQuery('[data-toggle="popover"]').popover()')

As you can see I already switched my code from using $ to jQuery in order to avoid any possible jQuery conflicts. However I'm still getting this error. I've also deleted another jQuery library that was being called upon but this also did not solve it.

I currently have a about half of my hair left since I get the feeling I'm overlooking a minor detail to solve this issue.

  • bumping this issue
    – AndrewL64
    Jul 27, 2015 at 23:38

1 Answer 1


The solution for the problem was actually pretty simple and I used a bit of a shortcut since I was running low on time. Simply moving the Popover jQuery code into my .phtml file made the error go away and made everything working.

I advise to see how your JQuery file is being called upon within Magento. Might be that you've added it to a local.xml file that is actually rendered after JQuery itself is called. Look at your source code to find out and make the appropriate changes.


Your Answer

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

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