web-dev-qa-db-ja.com

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

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

javascripttwitter-bootstraptooltip
91
SilentCry

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

したがって、あなたがしなければならないことは、triggerを'hover'としてのみ定義することです。ボタンをクリックした後、ツールチップを保持せずにリンクした同じ例の下：

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

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

185
davidkonrad

私は1年以上前に知っていますが、ここの例でこれを動作させることはできませんでした。次を使用する必要がありました。

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

また、ホバーするとツールチップが再び表示されます。

44
Nitai

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

要素クリックイベントでツールチップを表示する.hide（）を推奨するいくつかのソリューションを見つけました-しかし、それは悪いアイデアです-同じ要素に戻ってホバリング-それを非表示に保ちます...私の場合

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

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

8
Kamornik Cola

こんにちは、私はこの問題の解決策がほとんどありません。他のソリューションが機能しない場合は、これを試してください：

$('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');
    });

これもドラッグアンドドロップの解決策です。だから、これが誰かを助けることを願っています:)

8
Nienormalny_

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

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

これは修正です：

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

私の場合は、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'}）;

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

2
Jestino Sam

以下を追加することもできます。

onclick="this.blur()"
1
Sergey Koshkin

angular 7でbootstrap 4とjqueryを使用すると、これが見つかり、正常に動作します。破棄してもツールチップが非表示にならないため、破棄を使用しました。

  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');
    });
   }
1
user1983909

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

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

文書準備機能内でこれを使用します

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

このソリューションは私のために働いた。

$('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');
});

フィドル

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

0
طلحة

私の問題は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'); }); }

0
WHY

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

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

これは私のために働く：

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

});

問題があったとき、私は動的に保存ボタンを無効にしていました。

0
Devendra Singraul

実用的なソリューション

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

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

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

Cycle.jsでbootstrapツールチップを使用していますが、上記のいずれも機能しませんでした。

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

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');
}
0
Brian C.

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

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

私はBootstrap docsからこの規則に従わなかった：

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

0
Gabi L