javascript - 在框架外使用 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()而不是 $(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

与大多数工具提示库一样，基础工具提示似乎使用 title 属性作为默认工具提示。data-tooltip 是一个自定义字段，仅供想要自己使用它的人使用 - 而不是作为文档项。谷歌“html5 中的数据属性”。