在框架之外使用Zurb Foundation工具提示

Question

我试图在不加载任何其他基础库的情况下使用zurb基础工具提示脚本，但当我尝试加载它时，它会抛出这个js错误。

我的标记看起来像这样：

<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错误：

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

以下是我如何加载脚本

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

有人知道为什么会发生这种事吗？

Answer 1

我认为您调用函数的名称不正确。它应该是$(document).foundationTooltips()和NOT$(document).tooltips()

完整示例：

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

Answer 2

新文档应该具有以下内容：

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

请注意"数据工具提示"。现在很难找到记录。

Answer 3

Foundation工具提示与大多数工具提示库一样，似乎使用title属性作为默认工具提示。数据工具提示是一个自定义字段，只有想自己使用它的人才能使用，而不是作为文档项使用。谷歌"html5中的数据属性"。