Twitterのブートストラップ2.3.2ポップオーバーのままホバリング中に開く

Question

私はマウスがトリガーを離すとすぐに消えるデフォルトのポップオーバーよりも少し寛容にしたいと思うボトム向きのポップオーバーを持っています。

$('#example').popover({ 
    html: true, 
    trigger: 'hover', 
    container: '#example', 
    placement: 'bottom', 
    content: function() { 
     return '<div class="box">here is some content</div>'; 
    } 
}); 

私はそれがある限り、マウスがトリガーやポップオーバーのコンテンツ上にあるとして開いたままになってきましたが、彼らはトリガ素子からの矢印にマウスを持っているので、それは、ユーザーのために厳しいですポップオーバーと対話するためにこれらの領域を離れることなくコンテンツにアクセスすることができます。 2つのソリューションを念頭に置いておらず、どちらも動作していません。

1）遅延オプションがこれを行う必要があります。ポップオーバーコールに delay: {hide: 500} を追加すると、マウスが去った後にポップオーバーが開きますが、トリガーelemまたはポップオーバーを再入力するとポップオーバーが開いたままになることはありません。したがって、最初のタイムアウト。

2）トリガー要素からポップオーバーまでのトリガー要素から背景にマウスが移動するように、矢印を含む要素を広げます（マウスはトリガー/要素を決して残しません）。回避策は、ハードワイヤーにjQueryを使ってマウスオーバーとmouseleaveイベントである、または重複-国境を交換するhttp://jsfiddle.net/HAZS8/

.popover.bottom .arrow { 
    left: 0%; 
    padding-left:50%; 
    padding-right:50%; 
} 

：背景が透明ではないので、矢印を除いて、次の作品は、オーバーラップするCSSの境界線で描かれています画像付きの矢印。よりよい修正？あなたはポップオーバーのためshowとhideイベントを処理することができます

Answer 1

：

$('#example').popover({ 
    html: true, 
    trigger: 'hover', 
    container: '#example', 
    placement: 'bottom', 
    content: function() { 
     return '<div class="box">here is some content</div>'; 
    }, 
    animation: false 
}).on({ 
    show: function (e) { 
     var $this = $(this); 

     // Currently hovering popover 
     $this.data("hoveringPopover", true); 

     // If it's still waiting to determine if it can be hovered, don't allow other handlers 
     if ($this.data("waitingForPopoverTO")) { 
      e.stopImmediatePropagation(); 
     } 
    }, 
    hide: function (e) { 
     var $this = $(this); 

     // If timeout was reached, allow hide to occur 
     if ($this.data("forceHidePopover")) { 
      $this.data("forceHidePopover", false); 
      return true; 
     } 

     // Prevent other `hide` handlers from executing 
     e.stopImmediatePropagation(); 

     // Reset timeout checker 
     clearTimeout($this.data("popoverTO")); 

     // No longer hovering popover 
     $this.data("hoveringPopover", false); 

     // Flag for `show` event 
     $this.data("waitingForPopoverTO", true); 

     // In 1500ms, check to see if the popover is still not being hovered 
     $this.data("popoverTO", setTimeout(function() { 
      // If not being hovered, force the hide 
      if (!$this.data("hoveringPopover")) { 
       $this.data("forceHidePopover", true); 
       $this.data("waitingForPopoverTO", false); 
       $this.popover("hide"); 
      } 
     }, 1500)); 

     // Stop default behavior 
     return false; 
    } 
}); 

DEMO：組み込み機能のためのポップオーバーのために何があるかのようにhttp://jsfiddle.net/L4Hc2/

それはいないようだあなたこれは私が思いついたものです。

本当にうまくいけばハンドラが実行できるようになりました - ポップオーバー実際に隠されているか、実際に表示されています。また、ポップオーバーの各インスタンスは互いにユニークなので、グローバルなトリッキーは起こりません。

Answer 2

私はこれを解決するためのより包括的なアプローチを持っています。私は自分自身を使っています。ポップオーバーのhide関数をオーバーロードし、関連付けられたツールチップが上にホバリングされているかどうかを確認し、適切に反応します。& html5データ設定をすべて追加するのではなく、

(function($) { 

    var oldHide = $.fn.popover.Constructor.prototype.hide; 

    $.fn.popover.Constructor.prototype.hide = function() { 
     if (this.options.trigger === "hover" && this.tip().is(":hover")) { 
      var that = this; 
      // try again after what would have been the delay 
      setTimeout(function() { 
       return that.hide.call(that, arguments); 
      }, that.options.delay.hide); 
      return; 
     } 
     oldHide.call(this, arguments); 
    }; 

})(jQuery); 

ロードこのブートストラップ後& jQueryのソース。