【问题标题】：Foundation tool-tip `without $(document).foundation();` and `modernizr`基础工具提示`没有 $(document).foundation();` 和 `modernizr`
【发布时间】：2017-04-26 21:16:15
【问题描述】：

我正在尝试初始化基础工具提示而不初始化所有内容（即$(document).foundation()），但我在这个简单的任务中失败了。

我想知道 (1) 如何改用 new Foundation.Tooltip (2) 我是否需要 modernizr 因为 documentation in foundation website 没有提到modernizr 作为要求。

我提到了modernizr，因为如果没有那个工具提示，里面就没有任何样式或 html 会显示。

谢谢

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />

<body>
    <div class="row">
        <span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
          Hover me
        </span>
    </div>



    <script id="jsbin-javascript">
        $(document).ready(function() {
            new Foundation.Tooltip($(".has-tip"), {
                allowHtml: true
            });

            // $(document).foundation();
        })
    </script>
</body>

</html>

【问题讨论】：

还有什么需要回答的，我可以添加到我的回复中吗？

标签： javascript jquery html zurb-foundation

【解决方案1】：

首先回答第二部分：Foundation 6 不需要 Modernizr（但 F5 需要）（请参阅：http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6），因此您可以完全不使用 Modernizr 来使用 Foundation 6 的所有组件。

在您的示例中，我认为您正在动态混合 creating 工具提示：

new Foundation.Tooltip($(".has-tip"), {
    allowHtml: true
});

使用 initialising 工具提示：

$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally

或

$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)

所以要创建然后初始化 JUST 工具提示：

new Foundation.Tooltip($(".has-tip"), {
  allowHtml: true
});
$('.has-tip').foundation();

由于显而易见的原因，创建必须先于初始化。

查看示例：https://jsfiddle.net/tymothytym/b6eoh2yg/1/

【讨论】：

【解决方案2】：

我之前没有与基金会合作过，所以我绝对不是专家。不过，我想我已经弄清楚了为什么您的代码无法正常工作。

工作代码

您可以获取所有需要的链接，并在位于此处的 CodePen 中查看工作代码示例：http://codepen.io/SupposedlySam/pen/ybbYMp。

让 Foundation Tooltip 插件正常工作所需的条件

Foundation.css
Modernizr.js（放置在head 标记中或body 关闭之前的所有其他脚本下方（通过Foundation's JavaScript Setup Page）
JQuery.js
Foundation.js
Foundation.tooltip.js（仅在不使用包含所有插件的 Foundation.min.js 时才需要）

奇怪的东西并没有真正告诉你

如果没有足够的空间容纳单词的高度加上工具提示的高度，工具提示将出现在正文的左上角（原点 0,0）。
如果您希望工具提示在单击与其关联的单词时保持打开状态，则必须在元素上设置 tabIndex。
如果您要扩展 Foundation 插件的选项，则必须单独初始化您希望使用该功能的每个元素。
您必须在 html 属性中使用 &quot; 而不是双引号 (")，并且不能使用反斜杠 (\) 对其进行转义。

【讨论】：

【解决方案3】：

如果您不想在整个文档上初始化基础，您可以在特定元素上初始化它，例如：

$('.has-tip').foundation();

基础不依赖现代化，没有现代化就没有问题。

和一个codepen到一个工具提示而不调用document.foundation：

https://codepen.io/faw/pen/vmZjzg

【讨论】：