web-dev-qa-db-ja.com

Bootstrapツールチップが表示されない

私のアプリでBootstrap tooltip を使用しようとしています。現在、私は以下を持っています：

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

残念ながら、ツールチップが表示されません。私が間違っていることを理解しようとしています。 JavaScriptで作成できることを知っています。しかし、私はツールチップを宣言的に定義しようとしています。 Tooltip.jsファイルが含まれていることを確認しました。しかし、私は何が間違っているのか理解できません。

純粋に宣言的な意味でツールチップを使用することは可能ですか？もしそうなら、誰かがJSFiddleまたはBootplyサンプルを介してどのように私に示すことができますか？私は本当にこれに頭を叩いています。

jquerytwitter-bootstraptooltip
16
user2871401

いいえ、ツールチップを純粋に宣言的な意味で使用することはできません。 Docs から：

オプトイン機能：
パフォーマンス上の理由から、ツールチップとポップオーバーデータAPIはオプトインです。つまり、自分で初期化する必要があります。

したがって、次のようにJavaScriptで.tooltip()を手動で呼び出す必要があります。

$("[data-toggle=tooltip]").tooltip();

または、必要なセレクタを使用します。

jsFiddleのデモ

これは次のようになります。

screenshot

33
KyleMit

私のプロジェクトでは、.btn-groupクラスのdivと、クラスbtnの3つの「a」要素があります。 Bootstrapを使用して初期化すると、公式コードが機能しません（私はTwitter.Bootstrap.lessを使用しています。違いがあるかどうかわかりません）：

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

次に、bootstrapツールチップを初期化するために、私にとって魅力のように機能するImaJedi4everによって回答された別のStackOverFlowのソリューションを見つけました：

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

反応とbootstrap 4 alpha。

componentDidMount() {
    $(function(){
        $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
    });
},
6
phongyewtong