4

基盤のツールチップが機能していません。スクリプトの配置が間違っていると思いますが、実際の問題が何であるかを理解できませんでした。ツールチップは JavaScript 用に初期化する必要がありますか、それとも CSS のみに基づいていますか?

これは、終了 body タグのすぐ上に配置したスクリプトです

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

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

<script>
  $(document).foundation();
  $(document).foundation('orbit', {
    animation: 'fade'
    timer_speed: 3000,
    pause_on_hover: false,
    resume_on_mouseout: false,
    animation_speed: 300,


  });

  $(".orbit-timer").hide();
  $(".orbit-slide-number").hide();
</script>

私はこれに関連する他の質問をしましたが、正しい答えを見つけることができませんでした!

これはツールチップの html です

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

1 に答える 1

2

custom.modernizr.jsファンデーション 4 を使用している場合は、ページに含まれていないことがわかりますfoundation.tooltips.js。

近代化:

ページのヘッド セクションに Modernizr を追加します。Modernizr は、モバイル デバイスの検出だけでなく、古いブラウザーの HTML5 要素のシムとしても機能します。

参照: http://foundation.zurb.com/docs/javascript.htmlおよびhttp://foundation.zurb.com/docs/components/tooltips.html

デモ: http://jsfiddle.net/IrvinDominin/4jaEa/

編集

オプションの,後に欠落があり、実行前に軌道設定を行う必要があるため、軌道機能が機能しません。animation$(document).foundation()

コード：

$(document).ready(function () {
        $(document).foundation('orbit', {
        animation: 'fade',
        timer_speed: 3000,
        pause_on_hover: false,
        resume_on_mouseout: false,
        animation_speed: 300
    });

    $(document).foundation();

    $(".orbit-timer").hide();
    $(".orbit-slide-number").hide();

});

デモ: http://jsfiddle.net/IrvinDominin/SdAkp/

于 2013-09-25T10:26:57.780 に答える