php show.bs.popover,让Bootstrap的popover在鼠标移入弹窗时不消失

使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了下只找到一篇文章(链接),不好的是需要修改bootstrap的源代码,这不是我想要的,只好另寻它路。

后来想到可以在hide.bs.popover事件中使用event.preventDefault()来防止popover关闭,于是就想出了以下方法:

$(".hoverPopover").popover({

template: '

html: true,

trigger: "hover",

placement: "top",

delay: {hide: 100}

}).on('shown.bs.popover', function (event) {

var that = this;

$(this).parent().find('div.popover').on('mouseenter', function () {

$(that).attr('in', true);

}).on('mouseleave', function () {

$(that).removeAttr('in');

$(that).popover('hide');

});

}).on('hide.bs.popover', function (event) {

if ($(this).attr('in')) {

event.preventDefault();

}

});

现在把鼠标移动到popover上时,popover不会隐藏了。

重点:

对popover增加 delay: {hide: 100},让hide事件等待100毫秒再触发;

在shown.bs.popover事件中为popover元素绑定鼠标事件,在事件中为popover触发元素增加或删除“in”属性;

在hide.bs.popover事件中检查触发元素是否存在“in”属性,如果存在则取消隐藏。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值