logo标签列表

没有使用 `$(document).foundation();` 和 `modernizr` 的基础工具提示

javascriptjqueryhtmlzurb-foundation
11

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

我想知道 (1) 如何使用 new Foundation.Tooltip 代替 (2) 是否需要 modernizr，因为基础网站上的文档没有提到 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>
还有什么需要回答的问题吗，我可以在我的回复中添加吗？ - SupposedlySam
3个回答
5
首先回答第二个问题：Foundation 6不需要Modernizr（但F5需要）（参见：http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6），因此您可以完全不使用Modernizr使用所有Foundation 6组件。
在您的示例中，我认为您正在动态混合创建工具提示。
new Foundation.Tooltip($(".has-tip"), {
    allowHtml: true
});

使用初始化工具提示：

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

或者

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

所以要创建并初始化仅工具提示：
new Foundation.Tooltip($(".has-tip"), {
  allowHtml: true
});
$('.has-tip').foundation();

显然，创建必须在初始化之前完成。
示例请参见：https://jsfiddle.net/tymothytym/b6eoh2yg/1/
5

我之前没有使用过Foundation，所以并不是专家。但是，我认为我已经找出了你的代码为什么不起作用的原因。

正常工作的代码

你可以在这里的CodePen中获取所有需要的链接并查看正常工作的代码示例：http://codepen.io/SupposedlySam/pen/ybbYMp。

让Foundation Tooltip插件工作所需的内容

  1. Foundation.css
  2. Modernizr.js (放置在 head 标签内或在所有其他脚本之后、body 关闭之前（通过 Foundation 的 JavaScript 设置页面）
  3. JQuery.js
  4. Foundation.js
  5. Foundation.tooltip.js（仅当未使用包含所有插件的 foundation.min.js 时才需要）

一些奇怪的事情没有告诉你

  1. 如果没有足够的空间容纳单词的高度和工具提示的高度，则工具提示将显示在页面左上角(0,0)。
  2. 如果希望工具提示在单击与其关联的单词时保持打开状态，则必须在元素上设置 tabIndex。
  3. 如果正在扩展 Foundation 插件的选项，则必须单独初始化每个要使用该功能的元素。
  4. 必须在 html 属性中使用 &quot; 而不是双引号 (")，并且不能使用反斜杠 (\) 进行转义。
4
如果您不想在整个文档中初始化 foundation，您可以在特定的元素上初始化它，比如：
$('.has-tip').foundation();

Foundation不依赖于Modernizer，即使没有Modernizer，它也可以正常工作。

以下是不调用document.foundation的工具提示的Codepen示例：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接