基础工具提示 `without $(document).foundation();` 和 `modernizr`

Question

我正在尝试初始化基础工具提示而不初始化所有内容（即 $(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>

Answer 1

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

工作代码

您可以获得所有需要的链接并在位于此处的 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 时才需要）

没有真正告诉你的奇怪事情

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

Answer 2

首先回答第二部分：Foundation 6 不需要 Modernizr（但 F5 需要）（参见：http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6）因此您可以使用所有 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/

Answer 3

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

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

foundation 不依赖于 modernizer，没有 modernizer 也能正常工作。

无需调用 document.foundation:

的工具提示代码笔

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

基础工具提示 `without $(document).foundation();` 和 `modernizr`

Foundation tool-tip `without $(document).foundation();` and `modernizr`

html

javascript

jquery

zurb-foundation

工作代码

让 Foundation Tooltip 插件正常工作需要什么

没有真正告诉你的奇怪事情