twitter-bootstrap - Twitter Bootstrap のツールチップがボタンで機能しない

Question

ページの下部のスクリプト タグに次のコードを追加しました。

JavaScript

$('.resetPrice').tooltip();

HTML

<button title="reset pricing" class="btn btn-mini resetPrice" type="button" id="ResetAA1-1-1">
    <i class=" icon-refresh"></i>
</button>

どんな助けでも大歓迎です。

Answer 1

ここには大きな問題があるようには見えません。バージョン 2.x と 3.0 の間の API がツールヒント呼び出しを処理する方法に大きな違いはありません。

2.3.2および3.0の ToolTip API について詳しく読むことができます。

詳細情報がなければ、次の 2 つの可能性があります。

• 準備が整った doc 関数を必ず使用し、DOM が読み込まれるまで待ってツールチップ呼び出しを実行する必要があります。
• ブートストラップ外部 css および js ファイルへの適切な参照が含まれていることを確認してください (各デモ内で利用可能)。
• 要素がページの一番上にあり、既定のツール ヒントを上向きにして使用している場合、要素は表示されません。オブジェクトを下に移動するか、placementオプションを使用する必要があります。

このコードは正常に動作するはずです

$(function() {
    $('.resetPrice').tooltip();
});

2.3.2 fiddleと_3.0 fiddle

どちらも次の結果を生成します。

さらに問題を再現できるかどうかを確認し、まだ問題がある場合はお知らせください。

Answer 2

ツールチップの JavaScript を有効にしましたか? そうでない場合は、html の head に次のものが必要です。

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

ブートストラップ ページには、ボタン グループのツールチップの使用に関する特別な注意事項があります。

「.btn-group 内の要素でツールチップまたはポップオーバーを使用する場合、オプション コンテナを指定する必要があります: 'body' 不要な副作用 (ツールチップがまたはポップオーバーがトリガーされます)。」

Answer 3

    Changed to

    <button title="reset pricing" class="btn btn-mini resetPrice" type="button" id="ResetAA1-1-1">
        <i class=" icon-refresh" data-toggle="tooltip" title="Your Title" ></i>
    </button>

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