Question

I’m trying to use the zurb foundation tooltip script without loading any of the other foundation library for my site but when I try to load it, it’s throwing this js error.

My mark-up looks something like this:

<span class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>

<script src="js/jquery.js"></script>
<script src="js/jquery.foundation.tooltips.js"></script>
<script src="js/app.js"></script>

JS error:

Uncaught TypeError: Object [object Object] has no method 'tooltips' app.js:5
(anonymous function) app.js:5
fire jquery.js:1075
self.fireWith jquery.js:1193
jQuery.extend.ready jquery.js:435
DOMContentLoaded jquery.js:949

Here is how I’m loading the script

(function ($) {  

$(function(){
    // initialize tooltips
    $(document).tooltips();
});
})(jQuery);

Does anyone know why this is happening?

Answer 1

I think you aren’t calling the function by the correct name. It should be $(document).foundationTooltips() and NOT $(document).tooltips()

Full example:

(function ($) {  

$(function(){
    // initialize tooltips
    $(document).foundationTooltips(); //This line right here
});
})(jQuery);