0

我正在使用此代码来保持弹出框在悬停时保持打开状态：

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};


$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}});

这里的例子：http: //jsfiddle.net/raving/2thfaxeu/

这在 Bootstrap 3 上效果很好，但是我现在使用的是 Bootstrap 4 alpha，这不再起作用了。我不知道如何让它工作，我在任何地方都找不到答案。谁能帮我修改这段代码以使用 Bootstrap 4？

4

1 回答 1

2

好吧，我找到了答案。我查看了其他 Bootstrap 3 解决方案，发现了一个可以调整以与 Bootstrap 4 一起使用的解决方案。另外我忘了提到这是使用带有 tether.js 的弹出框。

$(".trigger-link").popover({
  trigger: "manual",
}).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")
    }
  }, 100);
});
于 2016-02-29T10:47:17.347 回答