2

ブートストラップポップオーバーが機能しているので、次のようになります。

  1. クリックするとポップオーバーが開きます
  2. ポップオーバーの外側をクリックすると、ポップオーバーが閉じます
  3. JSが無効になっている場合、ポップオーバーにはデフォルトのhrefがあります

コードは次のとおりです。

<a class="badge badge-popover"
    data-original-title="title here"
    data-trigger="focus"
    data-placement="right"
    data-content="<p>Content Here</p>" data-html="true"
    href="/help">?</a>

$('.badge-popover').click(function(e){
    e.preventDefault();
}).popover();

すべてのブラウザで正常に動作していますが、iPadでは動作していません。なぜ何かアイデアはありますか？どこが間違っているのですか？ありがとう ：）

Jquery 1.9.1、ブートストラップ2.1.1を使用しています

4

4 に答える 4

1

hoverイベントを使用してみてください：

これにより、デスクトップ経由hoverおよびモバイル/タブレット経由click（タッチ）でポップオーバーがトリガーされます。

<a class="badge badge-popover"
   data-original-title="title here"
   data-placement="right"
   data-trigger="hover"
   data-content="<p>Content Here</p>" data-html="true"
   href="/help">?</a>
于 2013-03-21T12:10:51.593 に答える
1

動作させるには、次のコード スニペットを参照してください。

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

$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('hide');
    }
 });
});

これは、本文のクリックを検出し、ページ上のすべてのツールチップを閉じる最も簡単な方法です。

ここで実際の例を確認できます

ありがとう！

于 2014-05-13T04:49:06.380 に答える
1

同じ問題が発生しました。動作するように変更data-trigger="focus"しdata-trigger="click"ます。ホバーも機能します。

于 2015-03-10T23:01:17.350 に答える
0

data-trigger="focus" を data-trigger="click" に変更すると、ほとんど問題なく動作しますが、問題は、ポップオーバーの外側をクリックしてもポップオーバーが開いたままになり、要素をクリックした場合にのみ閉じることができることです。ポップオーバーを開始しました...

于 2015-12-11T10:07:37.827 に答える