我正在使用此代码来保持popover在悬停时保持打开状态:
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吗?
答案 0 :(得分:1)
好吧我找到了答案。我查看了其他Bootstrap 3解决方案,发现了一个我可以调整使用Bootstrap 4的解决方案。另外我忘了提到这是使用tether.js的popovers。
$(".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);
});