Question

我想使用Foundation工具提示： http://foundation.zurb.com/docs/components/tooltips.html

根据说明：我将此代码放在body：

中

<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

并使用：

<script src="/js/foundation.min.js"></script>

和

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

我在body

中使用此代码

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

但它不起作用：

upload.tehran98.com/img1/6taveochivfnio6ch6h2.png

现在我该怎么办这样的工具提示？

upload.tehran98.com/img1/zkmxqt8nqvkbnyn4bd.png

Answer 1

我没有使用：

<script src="/js/custom.modernizr.js"></script>

并没有下载CSS：http://foundation.zurb.com/download.php

我现在使用它们和工具提示工作：

enter image description here

Answer 2

<!doctype html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.tooltip.js"></script>
<script src="js/modernizr.min.js"></script>
</head>
<body>
<script src="/js/foundation.min.js"></script>
<script>
  $(function(){
    $(document).foundation();    
  })
</script>
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
</body>
</html>

Answer 3

我和@naser有同样的问题，这就是我解决问题的方法：

我的第一个问题是我没有在我的网站上运行modernizr。在页面的<head>部分添加Modernizr：

<script src="/js/vendor/modernizr.js"></script>

如果您的Foundation文件安装正确，这应该有效，但出于某些原因我的文件没有。所以我使用CDNJS中的文件来安装modernizr：

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>

如果您不想使用CDNJS中的文件，那么您应该导航到您的Foundation / js文件夹，看看文件（modernizr.js，foundation.js等等）是否在那里。如果他们没有尝试检查bower_components文件夹，然后将它们复制到Foundation / js文件夹。如果您无法在任何地方找到它们，请尝试重新安装Foundation。

这对我很有用。希望这会有所帮助。

Answer 4

我通过将modernizr.js放在基础脚本文件夹中并通过调用页面head部分中的modernizr.js来解决它。

<script src="~/Scripts/foundation/modernizr.js"></script>

所有工作魅力!!

为什么我的基础工具提示不起作用？

4 个答案: