ボタンをクリックして＆mouseleaveした後にブートストラップのツールチップが消えない

Question

ブートストラップのツールチップに問題があります。ボタンをクリックすると、カーソルがボタンの外にあってもツールチップがそのまま残ります。私はマニュアルを見ている - Bootstrap's tooltipと私はボタンをクリックしている場合、私は同じ問題を参照してください。これを解決する解決策はありますか？最新のFF、IEで試してみました。

Answer 1

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

triggerを'hover'として定義するだけです。あなたはボタンがクリックされた後にツールチップを持続させずにリンクされている同じ例下：

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

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

Answer 2

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

は、要素上のツールチップがevent-をクリック.hide（）を推奨していますウェブ上でいくつかの解決策を見つけたが、それは同じ要素に戻ってホバリング悪いidea-である - それは私の場合は...隠された を保つ

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

すべての魔法を作りました！ - .myToolTippedElementは、ツールヒントを持つ要素です...

Answer 3

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

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

これはまた、ホバー上でツールチップを再び表示します。

Answer 4

私のケースではdata-toggle="tooltip"の代わりにrel="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コード //ツールチップ$（ 'BTN。'）ツールチップ（{ トリガー 'ホバー' }）。

これは間違いなく止まったツールチップを削除します。

Answer 5

上記のDavidの回答は私の問題を解決するのに役立ちました。 私は、ボタン上でホバーイベントとクリックイベントの両方を持っていました。 MACのFirefoxは、私が望むように動作しました。つまり、カーソルを置いたときにツールチップを表示し、クリックのためにツールチップを表示しない。 他のブラウザとOSでは、をクリックすると、ツールチップが表示され、表示されたままになります。私がホバーのために他のボタンにマウスを移動したとしても。 これは私が持っていたものです：

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

Answer 6

こんにちは、私はこの問題のために少しのソリューションを持っている：

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

これは修正です。他のソリューションがうまくいかない場合は、次のように試してください：

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

Answer 7

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

Answer 8

これは私の作品：

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

}); 

私は問題が動的に、ボタン保存して無効にされました。