CODEWITHSUNDEEP
javascriptjquerytooltipzurb-foundation
calebo
calebo

Reputation: 3442

Using Zurb Foundation tooltip outside of the framework

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?

Upvotes: 1

Views: 2012

Answers (3)

Michael Lasell
Michael Lasell

Reputation: 1

Foundation tooltips appears to use the title attribute as a default tooltip as do most tooltip libraries. data-tooltip is a custom field used only by someone who wants to use it themselves - not as a documented item. Google "data attributes in html5".

Upvotes: 0

drhenner
drhenner

Reputation: 2230

The new doc should have this:

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

Notice the "data-tooltip". That is very hard to find documented right now.

Upvotes: 0

Ed Charbeneau
Ed Charbeneau

Reputation: 4634

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);

Upvotes: 1

Related Questions