4

I want to use a Foundation tooltip: http://foundation.zurb.com/docs/components/tooltips.html

According to the instructions: I put this code in body :

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

and use:

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

and:

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

and I use this code in body

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

But it does not work:

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

Now what do I do to have tooltip like this?

upload.tehran98.com/img1/zkmxqt8nqvkbnyn4bd.png

4

4 に答える 4

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>
于 2014-06-20T10:23:50.623 に答える
1

@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 を再インストールしてみてください。

そして、それは私にとってうまくいきました。お役に立てれば。

于 2014-06-04T20:37:04.140 に答える