Twitterのブートストラップポップオーバーが表示されているかどうかを確認する方法は？

Question

私は

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div> 

のように、付属の潜在的なポップオーバーを持つ要素$('#anElement')を持っている私はちょうどポップオーバーが見えるかどうかを確認する方法を知りたいのです：これはjQueryを使って達成することができますか？

Answer 1

この機能は、使用しているフレームワークに組み込まれていない場合（それはもはやですtwitterブートストラップ、ちょうどbootstrap）、この機能を作成するために生成/変更されたHTMLを調べなければなりません。

popupver documentationをご覧ください。あなたが実際にそれを見るのに使うことができるボタンがあります。これは、シーンの背後にあるHTML要素を調べるのに最適な場所です。

クローム開発ツールやfirebug（firefox）を開けて、どうなっているのか見てみましょう。

<div class="popover fade right in" style="... /> 

あなたがしなければならないだろうすべては、その要素の存在のためのチェックです - 単にボタンの後に挿入されている<div>があるように見えます。あなたのマークアップが書かれている方法に応じて、あなたはこのようなものを使用することができます -

if ($("#popoverTrigger").next('div.popover:visible').length){ 
    // popover is visible 
} 

#popoverTriggerは、ポップオーバーが最初の場所で表示されるようにすることをトリガー要素であり、我々は上記気づいたように、ブートストラップは、単に後のポップオーバーのdiv要素を追加します素子。

Answer 2

これは、指定したdivが表示されているかどうかを確認します。

if ($('#div:visible').length > 0) 

または

if ($('#div').is(':visible')) 

Answer 3

あなたはそれを回避する方法を見つける必要があるので、ブートストラップのポップオーバーのプラグインで明示的に実装方法はありません。プラグインが表示されているかどうかをtrueまたはfalseで返すハックがあります。

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in'); 
console.log(isVisible); // true or false 

それは、実際にPopoverオブジェクトであるポップオーバープラグインによって保存されたデータにアクセスするチップエレメントをフェッチする責任があり、その後、返された要素は、クラスinを有しているかどうかを確認するオブジェクトのtip()メソッドを呼び出しその要素に添付されているポップオーバーが可視であることを示します。

---

あなたがtip()メソッドを呼び出すことができますことを確認するために添付ポップオーバーがある場合にも、チェックするべきではない：

if ($('#anElement').data('bs.popover') instanceof Popover) { 
    // do your popover visibility check here 
} 

Answer 4

現在のバージョンのBootstrapでは、要素にaria-describedbyが設定されているかどうかを確認できます。属性の値は実際のポップオーバーのidです。

あなたが目に見えるポップオーバーの内容を変更したいのであれば、たとえば、あなたが行うことができます：

var popoverId = $('#myElement').attr('aria-describedby'); 
$('#myElement').next(popoverid, '.popover-content').html('my new content'); 

Answer 5

をブートストラップ4、先端（とポップオーバーを使用する）はもはや機能していないようです。以下に示すよう

if ($('#element').data('bs.popover')._activeTrigger.click == true){ 
...do something 
} 

Answer 6

はおそらく、最も信頼性の高いオプションは、示さ/隠しイベントのリスニングすることになります。これは、ポップオーバーは、それをクリックし、アクティブになってきた基本的には場合は、有効になっているかどうかを確認するための一つの方法です。これにより、エラーが発生しやすいDOMを深く掘り下げる必要がなくなります。

var isMyPopoverVisible = false;//assuming popovers are hidden by default 

$("#myPopoverElement").on('shown.bs.popover',function(){ 
isMyPopoverVisible = true; 
}); 

$("#myPopoverElement").on('hidden.bs.popover',function(){ 
isMyPopoverVisible = false; 
}); 

これらのイベントは、ユーザーの操作なしでプログラムによってポップオーバーを表示/非表示/非表示にしてもトリガーされるようです。

P. S. BS3で試験した。