javascript - スライド div 内の要素のページにツールチップが残ることがある

Question

プロジェクトの 1 つにブートストラップを使用しており、提供されているツールチッププラグインで問題に直面しています。実際にはブートストラップのバグではありませんが、使用している状況で問題が発生します。

コンテンツ div 内にスライドするスライドバーがあります。ツールチップで効果を非表示/表示するためのボタン。jQuery UI スライドに基づくスライド効果。

問題は次のとおりです。

サイドバーの非表示ボタンをクリックし、同時にスライドアニメーション時にマウスをボタンホバーの外に移動すると、ツールチップが非表示にならず、ページ上にとどまる場合があります。

これはショーのサイドバーでも発生します。そして、それが起こると、それは非常に悪くてバグがあるように見えます.

どうすればこれを修正できますか?

score 20 · Accepted Answer

リチャードによるブートストラップフォーラムでの回答（https://github.com/r1ch0）

スライドアニメーションをトリガーする前に、ボタンをクリックしたときにツールチップを手動で非表示にします。


$('#button').on('click', function () {
  $(this).tooltip('hide')
  $('#sidebar').slide() // replace with slide animation
})

他の誰かがそれを見つけることができるという理由だけでここに投稿されました。

score 3 · Accepted Answer

私はKrunalの貢献（+1 btw）を使用しました。これは私を大いに助けましたが、問題を完全には解決しませんでした.
ボタンをクリックするとツールチップが消えますが、別の場所をクリックするまで、マウスをホバーすると元に戻り、再び動かなくなります。

そのため、ホバリング中、および要素にフォーカスしているときにツールチップが表示されることがわかりました。
最後に私はこれを書きました：

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

そして、それはうまく機能します。
ありがとう。

score 2 · Accepted Answer

https://github.com/twitter/bootstrap/pull/4104には、これに対する適切な解決策 (手動でのクリーンアップを必要としない解決策)があるようです。うまくいけば、すぐにリリースされます。

score 1 · Accepted Answer

ブートストラップツールチップを使用している場合は、遅延オプションを追加するのはどうですか。

jQuery('#example').popover(delay: { show: 100, hide: 100 })

ツールチップが画像のaltタグのようなものである場合は、jQueryを使用して削除します。

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery("img").removeAttr("alt");
});
</script>

4 に答える 4