ブートストラップツールチップが機能しない

260

私はここで怒っています。

次のHTMLがあります。

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

そして、Bootstrapスタイルのツールチップは、通常のツールチップだけを表示することを拒否します。

bootstrap.cssが正常に機能し、そこにクラスが表示されます

HTMLファイルの最後に、関連するすべてのJSファイルがあります。

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

Bootstrapの例のソースを確認しましたが、ツールチップを起動するものはどこにもありません。だから私はそれがうまくいくはずだと思いますか、またはここで重要な何かを見逃していますか？

私はモーダルやアラートなどがうまく機能しているので、私は完全なバカではありません;）

助けてくれてありがとう！

twitter-bootstrap 
— マイク・バートレット
ソース
2
ツールチップは、twittersの例のapplication.jsファイルで開始されます。HTMLを投稿できますか？スクリプトを初期化する方法を確認します。
— Andres Ilich
2
Ahhhhh ....最初のコメントは無視しました。これでcodeうまくいくはずです：<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> test </a> <br> <script> //ツールチップのデモ$（ ' .tooltip-test '）。tooltip（）</ script>
— Mike Bartlett
1
ツールチップオプションにセレクターを渡すことを忘れないでください$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich
アンドレス、ありがとう。実は私はそこにセレクターを必要としていないようです、それはaのクラスがtooltip-testとして参照されているためだと思います。
— Mike Bartlett
3
セレクターオプションがないと、ツールチップは機能しません。ここに私が提示したデモがあります：jsfiddle.net/VXctp、セレクターなしで試してください。
— アンドレスIlich

回答:

276

要約すると、jQueryセレクターを使用してツールチップをアクティブ化します。

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

実際、属性セレクターを使用する必要はありませんrel="tooltip"。タグにない場合でも、任意の要素で呼び出すことができます。

— マヌエル・エバート
ソース
13
Railsを使用する場合、これはですでに定義されbootstrap.js.coffeeてい$(".tooltip").tooltip()ます。必ずに含め//= require bootstrapてくださいapplication.js。
— slhck
6
要素にクラス.tooltipを追加すると、ツールチップが壊れます。.tooltipクラスを持つ要素内のコンテンツは非表示になり、マウスで非表示の要素を見つけた場合、ツールチップが表示されます。他のセレクターまたはクラス名を使用しても問題なく動作します。\
— LeonelGalán'12年
4
正しい@Leito、ブートストラップはスタイルを定義.tooltipし、デフォルトではそれらは非表示です。relただし、属性またはその他のクラスをセレクターとして使用できます。
— Manuel Ebert
3
はい、HTMLマークアップとJSセレクターの両方が必要です。これらはツールチップを適用する別の方法ではありません。
— ATSiem 2013年
1
一部のユーザーはモーダルでツールチップを表示しようとしている可能性があり、これはすべてのブートストラップバージョンで機能するわけではありません。モーダルではなく通常のページで試してみて、機能する場合は、それが問題であることがわかります。
— mjnissim 2013
212

同じ問題が発生した後、Bootstrapの必須属性の外に追加のタグ属性を追加しなくても、このソリューションが機能することがわかりました。

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

jQuery

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

お役に立てれば！

— マーカス・ヘルシャー
ソース
20
ありがとう！これでうまくいきました。どういうわけか、このページの他のソリューションは私のために機能していませんでした。
— ローマ
1
私はローマ人と一緒です。このソリューションは、bootswatch cssバリアントでも機能します。
— DaveCS 2014年
これでうまくいきました。私がこれを試すまで、他に何もそれを生き返らせませんでした。ありがとう！
— BlakePetersen 2014年
1
これも私にとってはうまくいきました。なぜ$（ '[data-toggle = "tooltip"]'）。tooltip（{'placement'： 'top'}）; 動作しませんか？
— ZeroCool 2015年
ありがとう、これでうまくいきました。JQueryライブラリをロードした後、<script>タグの間にコードを挿入してください。
— GeraldScott
31

すべてのjsファイルを個別に必要としない

すべてのブートストラップ機能を使用する場合は、次のファイルを使用してください。

-bootstrap.css
-bootstrap.js

それらの両方はhttp://twitter.github.comで見つけることができ
、最後に
-jquery.jsの最新バージョン

グリフィコン用場合、画像が必要です

glyphicons-halfings.pngおよび/またはglyphicons-halfings-white.png（白色の画像）
ウェブサイトの/ img /フォルダー内にアップロードする（または）好きな場所に保存するが、ブートストラップ内のフォルダーディレクトリを変更する必要がある.css

ツールチップについては、<head> </head>タグ内に次のスクリプトが必要です 

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

それでおしまい...

— ハリッシュクマール
ソース
27

http://getbootstrap.com/javascript/#tooltips-usage

オプトイン機能パフォーマンス上の理由から、ツールチップとポップオーバーデータAPIはオプトインです。

自分で初期化する必要があります。

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

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

このコードをHTMLに配置すると、ツールチップを使用できます

例：

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
— マックスオー
ソース
2
このオプトインのコンセプトを共有していただきありがとうございます。チュートリアルからそれを決して読まないでください。
— dpp
私のすべてのjquery / bootstrapツールチップのwhoasに対するソリューション
— DJ
提供されたリンクがありません：getbootstrap.com/docs/4.1/components/tooltips
— Guillaume
20

これは古い質問であることは承知していますが、ブートストラップの新しいリリースでこの問題が発生し、ウェブサイトでは明確ではないため、ツールチップを有効にする方法を次に示します。

要素に「tooltip-test」のようなクラスを与えます

次に、javascriptタグでこのクラスをアクティブにします。

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— アミール・ソレイマニ
ソース
これが私にとって有効な唯一の解決策でした。タイトルを更新するためにdata-original-title = "{{someAngularJSV​​ar}}"を使用していますが、問題なく動作しています。
— WKara 2018年
19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

jQuery

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

これは私のための仕事です。

— イゴール・シビドック
ソース
1
この提案は私にとっても完璧に機能しました。シンプルで上品なので気に入った。ドロップダウンやタブ要素で発生するように、プラグインがデフォルトで初期化されたかのように、Bootstrap標準を使い続けることができます。@Igorによって提案されたJSを新しいファイルに追加し、元のbootstrap.jsにバンドルしました
— -Quintana14年
14

その場合は$("[rel='tooltip']").tooltip();他の回答が示唆されているとして、あなたは唯一のDOMに現在ある要素にツールチップをアクティブにします。つまり、DOMを変更し、後で動的コンテンツを挿入する場合、機能しません。また、JQueryイベントの委任を使用するのではなく、個々の要素のイベントハンドラーをインストールするため、これははるかに非効率的です。したがって、Bootstrapのツールチップをアクティブにするために見つけた最良の方法は、次の1行のコードであり、ドキュメントの準備ができており、忘れることができます。

$(document.body).tooltip({ selector: "[title]" });

またはのtitle代わりにセレクタとして使用していることに注意してください。これは、それが他の多くの要素に適用することができるという利点を有する（されるはずrel=titledata-titlerelアンカーのみを対象しています）。また、古いブラウザの「フォールバック」として機能します。

また、data-toggle="tooltip"上記のコードを使用している場合は、属性は必要ありません。

各要素でマウスイベントを処理する必要があるため、ブートストラップツールチップは高価です。これが、デフォルトで有効になっていない理由です。したがって、上記の行をコメント化する場合でも、title属性を使用するとページは機能します。

タイトル属性を使用しない場合は、Hint.cssなどの純粋なCSSソリューションを使用するか、JavaScriptコードをまったく必要としないhttp://csstooltip.comを確認することをお勧めします。

— Shital Shah
ソース
動的な生成はいくつかのレベルに及ぶため、私はこれに苦労しています。href値は動的に生成されたコンテンツであり、結果のdiv idは、href値と一致するアイテム番号に基づいています。したがって、アイテムタイプAのリンクのページがある場合、アイテムa-1、アイテムa-2、アイテムa-3のリストがあり、これらの各リンクはアイテムの個々のページへのリンクですが、マウスオーバー時に動的コンテンツを表示するためのツールチップコンテンツ。これにより、ユーザーは完全なリンクをクリックする前にアイテムの概要を知ることができます。
— メラニーサムナー
これは最も役に立ちました。ツールチップをアイコンにバインドするように設定しました。アイコンライブラリには、なんらかの非同期の読み込みがあり、バインドできませんでした。クラスセレクターを使用してもIDを使用しない場合は機能するため、奇妙でした。ご協力ありがとうございました！
— Nick Woodhams
14

これが最も簡単な方法です。これを前に置くだけ</body>です：

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Bootstrapのドキュメントにあるツールチップに関する例を確認してください。

例えば： 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— マルコス・カッシアーノ
ソース
2
type属性を閉じてください...単一のタイプミスの編集はPITA：Sです
— Mohd Abdul Mujib
10

ツールチップとポップオーバーは、ドロップダウンやプログレスバーのようなcssプラグインだけではありません。ツールチップとポップオーバーを使用するには、jqueryを使用してそれらをアクティブにする必要があります（JavaScriptを読み取ります）。

したがって、HTMLボタンをクリックしたときにポップオーバーが表示されるようにするとします。

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

次に、ポップオーバーをアクティブにするには、次のJavaScriptコードが必要です。

$('.popovers-to-be-activated').popover();

実際、上記のJavaScriptコードは、「アクティブ化されるポップオーバー」クラスを持つすべてのHTML要素でポップオーバーをアクティブ化します。

言うまでもなく、上記のJavaScriptをDOM対応のコールバック内に配置して、DOMの準備ができたらすぐにすべてのポップオーバーをアクティブにします。

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— マヤンク・ジャイスワル
ソース
5

ヘッドセクションでは、最初に次のコードを追加する必要があります

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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

次に、bodyセクションに次のコードを記述する必要があります

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— ラッシュ.2707
ソース
4

すべてがまだ解決されない場合は、最新のjqueryライブラリーを使用します。最新のブートストラップ2.0.4およびjquery-1.7.2.jsを使用する場合、jqueryセレクターは必要ありません。

使うだけ rel="tooltip" title="Your Title" data-placement=" "

希望に応じて、データ配置で上/下/左/右を使用します。

— ハリッシュクマール
ソース
3

ヘッダーにjqueryとbootstrap-tooltip.jsを追加しました。このコードをフッターに追加するとうまくいきます！しかし、ヘッダーに同じコードを追加すると機能しません！ 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— カーシック
ソース
3
この場合、DOMはまだ読み込まれていないため、すべての要素がページに存在するわけではありません。上記のコードをラップする$(function() { ... });
— johnml 2012
3

Rails + Hamlを使用する方がツールチップを含める方がはるかに簡単な場合は、次のようにします。

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

要素の最後に次の行を追加するだけです。

:rel => "tooltip", :title => "Referential Guide"
— アンドレス・カレ
ソース
それがうまくいくことを本当に望んでいましたが、残念ながらうまくいきませんでした。
— ターボラディン
今ではRailsよりもDjantoに興味を持っていますが、コードを貼り付ける場合は、いくつかのヒントを提供しようとするかもしれません。
— Andres Calle 2013年
3

私の特定のケースでは、2つのバージョンのjQueryを含めていたため、機能しませんでした。1つはブートストラップ用、もう1つ（別のバージョン）はGoogleチャート用です。

チャートのjQueryロードを削除すると、正常に動作します。

— ディーター
ソース
3

私は追加しました：

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

bootstrap.min.jsの下にあり、それは動作します。

— Andy.sin
ソース
3

例を使用して、ツールチップをドキュメントのHTML要素に追加する方法を示します。

注意：

これらのツールチップサンプルをページに配置しても機能しない場合は、別の問題があります。次のようなものを確認する必要があります。

  • 含まれるスクリプトの順序
  • 削除されたHTML要素を初期化しようとしているかどうかを確認します
  • 含まれていないJSファイルのメソッドを呼び出そうとしているのかどうかを確認します

  • 必要な機能を提供するJSファイルを含めているかどうかを確認します（ツールチップだけでなく、ページで使用するコンポーネントも）。

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

上記の項目のいずれかが失敗すると、JavaScriptの読み込みや実行が妨げられ（多くの場合そうなります）、すべてが適切に機能し、壊れたままになります。

使用例

たとえば、バッジがあり、ユーザーがバッジにカーソルを合わせたときにツールチップを表示したいとします。

元のHTML：

<span class="badge badge-sm badge-plain">Admin Mode</span>

プレーンブートストラップのツールチップ

HTML要素のツールチップを作成していて、プレーンブートストラップのツールチップを使用している場合は、独自のJavaScriptコードでツールチップ初期化子を呼び出す必要があります。

前

<span class="badge badge-sm badge-plain">Admin Mode</span>

後

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

イニシャライザ

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

ブートストラップテンプレートツールチップ（INSPINIAなど）

ブートストラップテンプレート（INSPINIAなど）を使用している場合は、テンプレート機能をサポートするためのサポートスクリプトを含めます。

    <script src="/Scripts/app/inspinia.js" />

INSPINIAの場合、含まれているスクリプトは、ドキュメントの読み込みが完了すると、次のJavaScriptコードを実行することにより、すべてのツールチップを自動的に初期化します。

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

このため、INSPINIAスタイルのツールチップを自分で初期化する必要はありません。ただし、要素を特定の方法でフォーマットする必要があります。イニシャライザtooltip-demoは、class属性内でHTML要素を探し、tooltip()メソッドを呼び出して、属性を持つ子要素を初期化しますdata-toggle="tooltip"定義され。

この例のバッジでは、の外側の要素（<div>またはなど<span>）をclass="tooltip-demo"配置しdata-toggle、次に、、data-placementおよびtitle、バッジである要素内に実際のツールチップの、、属性を配置します。上記の元のHTMLを次のように変更します。

前

<span class="badge badge-sm badge-plain">Admin Mode</span>

後

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

イニシャライザ

None

内の子要素は <span class="tooltip-demo">は、ツールチップが適切に準備されていることに。ツールチップが必要な3つの子要素を1つのコンテナに配置できます。

それぞれがツールチップを持つ複数のアイテム

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

これの最良の使用法は、class="tooltip-demo"を、<td>または最も外側の<div>またはに追加すること<span>です。

テンプレート使用中の単純なブートストラップツールチップ

INSPINIAを使用しているが、外部<div>または<span>タグを追加してツールチップを作成したくない場合は、テンプレートに干渉することなく標準のブートストラップツールチップを使用できます。この場合、自分でツールチップを初期化する必要があります。ただし、classツールチップアイテムを識別するには、属性でカスタム値を使用する必要があり ます。これにより、ツールチップ初期化子がINSPINIAの影響を受ける要素を妨害するのを防ぎます。この例では、次のように使用しますstandalone-tt。

前

<span class="badge badge-sm badge-plain">Admin Mode</span>

後

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

イニシャライザ

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— マイク・スティリオン
ソース
2

javascriptでツールチップを含むhtmlを作成し、それをドキュメントに挿入する場合、ドキュメントのロード時ではなく、ドキュメントにhtmlを挿入した後にポップオーバー/ツールチップをアクティブにする必要があります...

— chri_chri
ソース
2

HTMLの後にツールチップJavaScriptを配置する必要があります。このような ：

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

または、$（document）.readyを使用します。 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

ツールチップはjavascriptの前にツールチップhtmlを配置しているため機能しません。ツールチップにjavascriptがあるかどうかはわかりません。私の意見では、スクリプトは上から下へと読み取られます。

— ズーム
ソース
2

同様の問題がありました。特に、垂直ボタンコンテナーのようなボタンコンテナーで実行している場合はそうです。その場合、コンテナを「ボディ」として設定する必要があります

I have added a jsfiddle example

例

— ショーンベイダー
ソース
1

ツールチップのブートストラップドキュメントから

ツールチップはパフォーマンス上の理由からオプトインされているため、自分で初期化する必要があります。ページ上のすべてのツールチップを初期化する1つの方法は、data-toggle属性でそれらを選択することです。

  $('[data-toggle="tooltip"]').tooltip()
— ラヒル・アフマド
ソース
0

次のことを行う必要があります。追加

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

ページのどこかにコードを配置します（<head>セクション内が望ましい）。

また、data-toggle: "tooltip"有効にしたいものに追加します。

— カルムチャイルズ
ソース
0

あなたはPopper.jsを使うことができます

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

そして、ツールチップ関数を呼び出します：

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— モーセンニュートア
ソース
-2

Bootstrapツールチッププラグインに代わる迅速で軽量な方法：

HTML：

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS：

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT：

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

ラベル/テキストは、クラス "mytooltip"のラッパーで囲む必要があります。このラッパーにはIDが必要です。

ラベルの後には、クラス「mytooltiptext」のdivでラップされたツールチップテキストと、親ラッパーのID +「_tttext」で構成されるIDがあります。セレクターの他のオプションを使用できます。

それが役に立てば幸い。

— jdisla
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.