Question

我正在尝试显示基础3工具提示，但是当我将鼠标悬停在span元素上时，它会显示标准工具提示。

enter image description here

我引用了以下js文件

<script src="/js/jquery-1.8.2.min.js" type="application/javascript"></script>   
<script src="/js/modernizr.foundation.js"  type="text/javascript"></script>
<script src="/js/app.js"  type="text/javascript"></script>
<script src="/js/jquery.foundation.forms.js"  type="text/javascript"></script>
<script src="/js/jquery.foundation.tooltips.js"  type="text/javascript" ></script>

元素：

<span class="has-tip tip-top noradius" data-width="210" title="Bottom and the default position.">Your Target Price</span>

我是否需要先初始化代码？

Answer 1

脚本的输入顺序错误。 <{1}} 始终应该首先出现，因为它初始化了插件。

app.js

同样<script src="/js/jquery-1.8.2.min.js" type="application/javascript"></script> <script src="/js/jquery.foundation.forms.js" type="text/javascript"></script> <script src="/js/jquery.foundation.tooltips.js" type="text/javascript" ></script> <script src="/js/app.js" type="text/javascript"></script>应该在modernizr.js。http://modernizr.com/docs/#installing

中

<head>

Answer 2

您可能忘记引用所有重要的样式表（foundation.min.css），将其添加到您引用javascripts的页面顶部：

  <link rel="stylesheet" href="/stylesheets/foundation.min.css"/>
  <link rel="stylesheet" href="/stylesheets/app.css"/>

此外，您应该更新到Zurb-Foundation 3.2

基础3.1工具提示未显示

2 个答案: