当popover徘徊时,我怎样才能保持bootstrap popover活着？

Question

我正在使用twitter boostrap的popover来创建一个显示用户信息的悬停卡,我在这里触发mouseover检查jsfiddle上的popover.我想在它徘徊时保持这个popover活着.

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
        html : true,
        trigger : 'manual',
        content : function() {
            return '<div class="box"></div>';
        }
    });
$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});
$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});

你可以想到facebook悬停卡的工作.我想以同样的方式.我怎样才能做到这一点？

Answer 1

在Plunker中查看此工作代码

小修改(来自vikas提供的解决方案)以适应我的用例.
1.
在弹出框按钮的悬停事件上打开弹出窗口2.将鼠标悬停在弹出框上时保持弹出窗口
3. 在鼠标左键上关闭弹出窗口中的popover按钮或弹出框.

$('.pop').popover({
    trigger: 'manual',
    html: true,
    animation: false
})
.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);
});

在Plunker玩它

Answer 2

我来了另一个解决方案...这是代码

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

Answer 3

这是我的看法:http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

有时将鼠标从弹出窗口触发器对角移动到实际弹出窗口内容时,将鼠标悬停在下面的元素上.我想处理这种情况 - 只要你在超时触发之前到达弹出窗口内容,你就是安全的(弹出窗口不会消失).它需要delay选项.

这个hack基本上覆盖了Popover leave函数,但调用了原始函数(启动计时器来隐藏弹出框).然后它将一次性监听器附加到mouseenterpopover内容元素.

如果鼠标进入弹出框,则清除计时器.然后它转动它mouseleave在popover上监听,如果它被触发,它会调用原始的leave函数,以便它可以启动hide timer.

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);
      });
    })
  }
};

Answer 4

我使用了触发器设置hover并将容器设置为#element最终添加了boxto 的位置right.

这应该是你的设置:

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

和#exampleCSS需要position:relative;检查下面的jsfiddle:

https://jsfiddle.net/9qn6pw4p/1/

编辑

这个小提琴有两个链接,没有问题 http://jsfiddle.net/davidchase03/FQE57/4/

Answer 5

我认为一个简单的方法是:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

这样,popover就在目标元素本身内创建.所以当你将鼠标移到弹出窗口上时,它仍然在元素上方.Bootstrap 3.3.2适用于此.旧版本可能在动画方面存在一些问题,因此您可能需要禁用"animation:false"

Answer 6

这是我在网络上的其他位的帮助下使用bootstrap popover的方式.动态获取网站上显示的各种产品的标题和内容.每个产品或popover都有唯一的ID.当退出产品($ this .pop)或popover时,Popover将消失.超时用于显示弹出窗口,直到通过产品退出而不是弹出窗口.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

Answer 7

我同意最好的方法是使用David Chase 、Cu Ly 和其他人给出的方法，最简单的方法是使用container: $(this)以下属性：

$(selectorString).each(function () {
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
});

我想在这里指出，这种情况下的弹出窗口将继承当前元素的所有属性。因此，例如，如果您对.btn元素（bootstrap）执行此操作，您将无法选择 popover 内的文本。只是想记录下来，因为我花了很长时间在这个问题上。

Answer 8

这是我设计的一种解决方案，看起来效果很好，同时还允许您使用常规的Bootstrap实现打开所有弹出窗口。

原始提琴：https : //jsfiddle.net/eXpressive/hfear592/

移植到这个问题：

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});