Question

我有这个工作的bootstrap popover，它可以正常使用time属性。但是我希望它具有以下功能：当有人将鼠标放在它不应该关闭的内容上时，当鼠标离开内容时应该关闭它。

以下是与之相关的代码。 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);

它的作用基本上是抓住鼠标进入弹出窗口，并拒绝关闭弹出窗口。

Answer 2

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

Bootstrap popover留在内容上

2 个答案: