I have a form that use popovers.. and i have the following code inside document ready
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
when the form is loaded i see the following errors in console.
jquery-3.1.1.min.js:2 jQuery.Deferred exception: $(...).popover is not a function TypeError: $(...).popover is not a function at HTMLDocument.<anonymous> ..... ..... undefinedr.Deferred.exceptionHook @ jquery-3.1.1.min.js:2 jquery-3.1.1.min.js:2 Uncaught TypeError: $(...).popover is not a function(…)
Its either duplicate instance of jQuery or namespace clash with some other library.
Check for duplicate insance of jQuery and remove. If that doesn't solve the issue, then it could be namespace conflict with some other library.
The jQuery library uses $ as a shortcut for jQuery. If some other JavaScript library use $ variable, you can run into conflict. To avoid this put jQuery into no-conflict mode immediately after it is loaded.
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script>
// $j optional alias to jQuery noConflict()
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('[data-toggle="popover"]').popover();
});
</script>Check if you have multiple jquery instances running on the page, check for duplicate inclusion of same library.
What version of jQuery are you using? In what order are you importing the libraries jQuery and Bootstrap?
Use jQuery in no conflict mode. See https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
I had this issue. Then i discovered i was including the library twice, once in header and once in footer in my template. Removed the duplicate and problem solved.