javascript - ブートストラップのポップオーバーを自動的に隠す

Question

数秒後に Bootstrap ポップオーバーを自動的に非表示にしたい。ユーザーがコントロールにカーソルを合わせると、ポップオーバーが表示される必要がありますが、ユーザーがマウス ポインターを動かさない場合、このポップオーバーは数秒後に自動的に非表示になる必要があります。

携帯電話やタブレットでは、ユーザーがコントロールをタップするとポップオーバーが表示され、ユーザーが何かを入力している間はフォーカスが同じコントロールに留まり、ポップオーバーが妨げになるため、これは重要です。

Answer 1

注：このソリューションは、Bootstrap3用に作成されました。

これは機能しますが、より効率的な方法があるかもしれません。

$('.pop').popover().click(function () {
    setTimeout(function () {
        $('.pop').popover('hide');
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<span class="pop" data-original-title="My popover" data-content="Isn't it great?">Click me</span>

http://jsfiddle.net/isherwood/Bqq7C/27/

Answer 2

受け入れられた答えは問題なく機能しますが、よりブートストラップのアプローチを次に示します。

元の答え

$('.pop').on('shown.bs.popover', function () {
    var $pop = $(this);
    setTimeout(function () {
        $pop.popover('hide');
    }, 2000);
});

---

リンプラッシュからの更新

この回答には、重要な情報が 1 つ欠けています!! ポップオーバーの初期化中にトリガーオプションを追加する必要があります.. {trigger:"manual"} .. そうしないと、ブートストラップが onclick イベントをアタッチし、最初の使用後に 2 回のクリックが必要になるという問題が発生します.. 以下は提案された解決策です。

$("#element").popover({ trigger:"manual" }).click(function() { 
  var pop = $(this); 
  pop.popover("show") 
  pop.on('shown.bs.popover',function() { 
   setTimeout(function() {
    pop.popover("hide")}, 2200); 
  }) 
})

Answer 3

次のように、独自の新しいデータ属性をポップオーバーに追加することもできます。

$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function() {
    this_popover = $(this);
    setTimeout(function () {
        this_popover.popover('hide');
    }, $(this).data("timeout"));
});

今、あなたは使うことができます

<span 
    data-toggle="popover" 
    data-timeout="2000" 
    title="A title" 
    data-content="Some explanatory text">
    Your text
</span>

データタイムアウトで指定したミリ秒数が表示された後、ポップオーバーは消えます。