javascript - Bootstrap 弹出窗口停留在内容上

Question

我有这个有效的 Bootstrap 弹出窗口，它可以很好地处理时间属性。 但我希望它具有这样的功能，即当有人将鼠标放在内容上时它不应该关闭，而当鼠标离开内容时应该关闭。

下面是相关的代码。 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

如果您的意思是当用户在弹出窗口上移动鼠标时，它不应关闭，那么这是我为此使用的代码。致谢 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);

它所做的基本上是捕获鼠标在弹出窗口上的输入，并拒绝关闭弹出窗口。