ブートストラップポップオーバーコンテンツに滞在

Question

私は時間属性とうまく動作するこの作業ブートストラップポップオーバーを持っています。 しかし、私は、誰かがマウスをコンテンツに置いたときに閉じてはならず、マウスがコンテンツを離れるときに閉じなければならないという機能性を望んでいます。

以下に関連するコードです。 https://jsfiddle.net/bob_js/eLLaacju/5/

HTML

<div> 
Title 
</div> 
<div class="container"> 
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i> 

<div id="popover-content-a" class="hidden"> 
<div> 
    <h6><b>Heading</b></h6> 
    <p>Content <a href="#">Click Me</a></p> 
</div> 
</div> 
<br> 

<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i> 

<div id="popover-content-b" class="hidden"> 
<div> 
    <h6><b>Heading</b></h6> 
    <p>Content <a href="#">Click Me</a></p> 
</div> 
</div> 

</div> 

のjQuery：

$(function() { 
    $("#popover-a").popover({ 
    html: true, trigger: 'hover', delay: {show:50, hide: 1000}, 
    content: function(){ 
     return $('#popover-content-a').html();  
    } 
    }); 
    $("#popover-b").popover({ 
    html: true, trigger: 'hover', delay: {show:50, hide: 1000}, 
    content: function(){ 
     return $('#popover-content-b').html();  
    } 
    }); 
}); 

CSS：

.circle-macro { 
    border-radius: 50%; 
    background-color: rgb(68, 104, 125); 
    color: white; 
    padding: 0 8px; 
    font-family: 'Times New Roman'; 
    font-style: italic; 
    z-index: 10; 
    cursor: pointer; 
} 
.hidden{ 
    display: none; 
} 

Answer 1

https://jsfiddle.net/bob_js/eLLaacju/6/

jQueryの

$(function() { 
    $("#popover-a").popover({ 
    html: true, trigger: 'manual', animation:false, 
    content: function(){ 
     return $('#popover-content-a').html();  
    } 
    }).on("mouseenter", function() { 
     var _this = this; 
     $(this).popover("show"); 
     $(".popover").on("mouseleave", function() { 
      $(_this).popover('hide'); 
     }); 
    }).on("mouseleave", function() { 
     var _this = this; 
     setTimeout(function() { 
      if (!$(".popover:hover").length) { 
       $(_this).popover("hide"); 
      } 
     }, 300); 
}); 
    $("#popover-b").popover({ 
    html: true, trigger: 'manual', animation:false, 
    content: function(){ 
     return $('#popover-content-b').html();  
    } 
    }).on("mouseenter", function() { 
     var _this = this; 
     $(this).popover("show"); 
     $(".popover").on("mouseleave", function() { 
      $(_this).popover('hide'); 
     }); 
    }).on("mouseleave", function() { 
     var _this = this; 
     setTimeout(function() { 
      if (!$(".popover:hover").length) { 
       $(_this).popover("hide"); 
      } 
     }, 300); 
}); 
}); 

私はそれを更新しており、これは正常に動作し、同様stackoverflowの中にそれを見つけました。 http://plnkr.co/edit/x2VMhh?p=preview

Answer 2

ユーザーがポップオーバー上にマウスを移動したとき、それは、近くにはならないことを意味している場合ここに私がこれに使うコードがあります。クレジットは元のアイデアとコードについてはthis fiddleの著者になります。

$.fn.popover.Constructor.prototype.leave = (function(fn) { 
    return function(obj) { 
    var self = obj instanceof this.constructor ? 
     obj : $(obj.currentTarget).data("bs." + this.type); 
    if (!self) { 
     self = new this.constructor(obj.currentTarget, this.getDelegateOptions()); 
     $(obj.currentTarget).data("bs." + this.type, self); 
    } 

    var container, timeout; 

    fn(obj); 

    if (self.$tip && self.$tip.length) { 
     container = self.$tip; 
     timeout = self.timeout; 
     container.off("mouseenter.popover").one("mouseenter.popover",() => { 
     clearTimeout(timeout); 
     container.off("mouseleave.popover").one("mouseleave.popover",() => { 
      $.fn.popover.Constructor.prototype.leave.call(self, self); 
     }); 
     }); 
    } 
    }; 
})($.fn.popover.Constructor.prototype.leave); 

これは基本的に、マウスがポップオーバーに入力されたことをキャプチャし、ポップオーバーを閉じることを拒否します。