工作代码

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时才需要）

奇怪的东西并不真正告诉你

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

Answer 2

首先回答第二部分：基础6并不需要Modernizr（但是F5没有）（参见：http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6）所以你可以完全使用所有的Foundation 6组件而不用 Modernizr。

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

String

使用 initialising 提供工具提示：

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

OR

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

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

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

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

参见示例：https://jsfiddle.net/tymothytym/b6eoh2yg/1/

Answer 3

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

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

基础不依赖于现代化者，没有现代化者就没有任何问题。

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

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

基础工具提示`没有$（document）.foundation（）;`和`modernizr`

3 个答案:

工作代码

使用Foundation Tooltip插件工作所需的内容

奇怪的东西并不真正告诉你