ブートストラップのツールチップは、ボタンをクリックしてマウスを離しても消えない

ブートストラップのツールチップに問題があります。ボタンをクリックすると、カーソルがボタンの外にあってもツールチップが残ります。マニュアルを確認しました-Bootstrapのツールチップ。ボタンをクリックしても同じ問題が発生します。これを修正する解決策はありますか？最新のFF、IEで試してみました。

これはtriggerが設定されていないためです。トリガーのデフォルト値はです'hover focus'。したがって、ボタンがであるため、ボタンがクリックされた後、別のボタンがクリックされるまで、ツールチップは表示されたままですfocused。

だからあなたがしなければならないすべてはtrigger、'hover'唯一として定義することです。ボタンがクリックされた後、ツールチップを永続化せずにリンクした同じ例の下：

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

フィドルのドキュメントの例-> http://jsfiddle.net/vdzvvg6o/

私は1年以上前から知っていますが、ここでの例でこれを機能させることはできませんでした。私は以下を使用しなければなりませんでした：

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

これはまた、ホバー時にツールチップを表示します。

こんにちは、この問題の解決策はほとんどありません。他の解決策がうまくいかないときは、これを試してください：

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

これはドラッグアンドドロップのソリューションでもあります。だから私はこれが誰かを助けることを願っています:)

私の場合、問題はInternet Explorerでのみ再現されました。どの要素（input、divなど...）にツールチップがある場合でも、クリックした場合、ツールチップは表示されたままです。

要素のClickイベントのツールチップである.hide（）を推奨するいくつかの解決策をWebで見つけましたが、それは悪い考えです-同じ要素に戻ってホバリング-それを非表示にします...私の場合

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

すべての魔法を作りました!!!-.myToolTippedElementはCourseのツールチップを持つ要素です...

ブートストラップ4とjqueryを使用したAngular 7では、これを見つけて問題なく動作しました。破棄してもツールチップが非表示にならないため、破棄を使用しました。

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

私の場合はうまくいったrel="tooltip"代わりに使ってみてくださいdata-toggle="tooltip"。私は使用 data-toggle="tooltip"していて、トリガー条件をホバーとして設定しましたが、私の場合は機能しませんでした。データセレクターを変更したところ、うまくいきました。

HTMLコード：

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

JSコード // Tooltip $（ '。btn'）。tooltip（{trigger： 'hover'}）;

これにより、スタックしたツールチップが確実に削除されます。

上記のデイビッドの答えは私の問題を解決するのに役立ちました。ボタンにホバーイベントとクリックイベントの両方がありました。MAC上のFirefoxは期待どおりに動作しました。つまり、ホバー時にツールチップを表示し、クリック時にツールチップを表示しません。他のブラウザやOSでは、クリックするとツールチップが表示され、そのまま表示されます。ホバーのためにマウスを他のボタンに移動しても。これは私が持っていたものです：

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

これは修正です：

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

また、以下を追加できます。

onclick="this.blur()"

ワーキングソリューション

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });

この問題を修正する方法は、次のコードを使用して、クリックイベント関数のツールチップを削除することでした。

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

私はcycle.jsでブートストラップのツールチップを使用していますが、上記のどれもうまくいきませんでした。

私はこれをしなければなりませんでした：

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

これは私にとってはうまくいきます：

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

保存ボタンを動的に無効にすると、問題が発生しました。

あなたのドキュメント準備機能の中でこれを使用

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

この解決策は私にとってうまくいきました。

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

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

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

バイオリン

私は以前の回答で与えられた解決策のほとんどを試しましたが、どれも私のためにうまくいきませんでした。

私の問題はDataTableにあります。以下のコードは私のために働きます。

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

以下の方法を使用して、mouseleaveのツールチップを非表示にすることもできます。

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

私の場合、これは修正でした：

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

私はBootstrap docsからこのルールに従っていませんでした：

ツールチップは、対応する要素がDOMから削除される前に非表示にする必要があります。

これは、以下を追加することでHTMLでも実現できます。

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

また、古いバージョンでもこの方法を使用できます。これは、受け入れられた回答がうまくいかなかったため、このコードを自分とその仕事のために書いたためです。

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

誰かがクリック後にしばらく表示されるツールチップを設定したい場合は、ここに私がやった方法があります：

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

強制blur（）を使用すると、ユーザーエクスペリエンスを低下させることができます。私はそれをしません。「data-original-title」と「data-toggle」と「title」の属性を削除すると効果があることがわかりました。

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");