web-dev-qa-db-ja.com

bootstrapツールチップとポップオーバーを有効にする方法（bootstrapベースのテーマ））？

Bootstrap に基づくテーマを使用しています。

Bootstrapに付属するTooltipおよびPopover機能を使用したいのですが、使用できませんでした。

Bootstrap Javascript ページで次のように述べられています。

オプトイン機能

パフォーマンス上の理由から、TooltipとPopover data-apiはオプトインです。つまり、自分で初期化する必要があります。

ページ上のすべてのツールチップを初期化する1つの方法は、data-toggle属性で選択することです。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})


上記のコードをnode.tpl.php（タグ内）に追加しようとしましたが、機能しませんでした。また、そのコードをscript.jsとして保存しようとして、テーマ情報ファイルに追加しましたが、機能しませんでした。

これらの機能を有効にするにはどうすればよいですか？上記のコードをどこで使用しますか？

7themingjavascript
3
herci

以下のコードをnode--mytype.tpl.phpに追加して、ツールチップとポップオーバーを有効にできます。

<script>
(function($) {
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
});
})(jQuery);
</script>


このJavaScriptをカスタムnode--mytype.tpl.phpに追加しました。そのコンテンツタイプでツールチップonlyを使用したかったからです。

Webサイトの任意の場所（ブロックなど）でツールチップを使用する場合は、上記のコードをテーマのhtml.tpl.phpファイルのbody終了タグの直前に追加する必要があります。

1
herci

ツールチップ/ポップオーバーを有効にする最良の方法— selectorオプションを使用（ this および this を参照）：

$(document).tooltip({ selector: '[data-toggle="tooltip"]' });
$(document).popover({ selector: '[data-toggle="popover"]' });

このようにして、動的に生成されたツールチップ/ポップオーバーでも動作します。

完全なコードは次のとおりです。

<script>
  (function($) {
    $(function() {
      $(document).tooltip({ selector: '[data-toggle="tooltip"]' });
      $(document).popover({ selector: '[data-toggle="popover"]' });
    });
  })(jQuery);
</script>

次のいずれかに配置できます。

  1. あなたのテーマは.jsファイル（削除することを忘れないでください<script> 鬼ごっこ）。
  2. page.tpl.php テンプレート。
  3. カスタムブロック（この場合は、どのページで有効にするかを簡単に制御できます）。
1
tonystar