让Bootstrap的popover在鼠标移入弹窗时不消失

4人阅读 评论(0) 收藏 举报
分类:

使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了下只找到一篇文章(链接),不好的是需要修改bootstrap的源代码,这不是我想要的,只好另寻它路。
后来想到可以在hide.bs.popover事件中使用event.preventDefault()来防止popover关闭,于是就想出了以下方法:

$(".hoverPopover").popover({
        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div><h3 class="popover-title" style="border-bottom:none;"></h3></div>',
        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不会隐藏了。
重点:

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

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

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

查看评论

Bootstrap popover 实现鼠标移入移除显示隐藏功能

该段js代码可实现 popover  下鼠标移入移除时显示、隐藏 popover  提示信息功能 var strContent = 'name}}">'+ '...
  • Q718330882
  • Q718330882
  • 2017-05-15 11:25:20
  • 2621

bootstrap 中popover的鼠标悬停下拉菜单效果

这两天想要做个类似前端网登陆后滑过头像显示个人信息的效果。期间遇到不少问题,记录下来方便以后查找。 html相关 1、为了实现通用性,我在元素上加上了mypop的class和contentdi...
  • u011139317
  • u011139317
  • 2016-02-04 14:16:15
  • 2299

鼠标移入就显示弹框,移出弹框就消失

html: 菜单 ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016-08-08 13:14:54
  • 1852

Bootstrap的popover(弹出框)2秒后定时消失

先在目标DOM结构中弹出小提示,然后2秒后提示消失function showPopover(target, msg) { target.attr("data-original-title", ...
  • ann295258232
  • ann295258232
  • 2017-02-27 14:25:35
  • 2912

jQuery实现鼠标移上弹出提示框,移出消失

里有一行数据 “那片笑声让我想起......”  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失。如下图: ..... //data是提示框要...
  • itmyhome
  • itmyhome
  • 2014-01-07 17:59:26
  • 7823

Bootstrap Popover 点击Popover外区域自动关闭Popover

最近在写一个web网站,前端方面,都是初学的,用到了一个bootstrap的popover,但是有些东西默认的不太好用,就只能自己修改了。 比如说默认只有点击触发的那个按钮才能关闭pop,而现在我想...
  • scrawlor
  • scrawlor
  • 2013-12-09 16:19:33
  • 7820

bootstrap 点击空白处popover弹出框隐藏

代码: div> a class="btn btn-success show" title="Popover title" data-container="body" d...
  • water_Popcorn
  • water_Popcorn
  • 2018-01-09 13:29:49
  • 194

ios开发笔记之如何点击popover之外的区域让popover不消失

popover弹出后,点击外面的区域默认会让popover消失   最近一个项目有这样地需求,因为弹出的popover上有取消和确定按钮,所以客户要求点击popover外区域让popover不消失。...
  • rockhunk
  • rockhunk
  • 2015-03-10 10:52:00
  • 3290

BootStrap自定义popover,点击区域隐藏功能!

当用bootstrap时,经常需要在某个地方添加帮助按钮,点击或者鼠标悬浮时,提示帮助信息,然而,bt给我们提供的方法里貌似没有,如果有哪位大神知道bootstrap有的可以留言,小弟学习了:代码如下...
  • lxyamxj
  • lxyamxj
  • 2017-02-28 16:03:16
  • 2302

bootstrap实现弹出提示为图片

效果图如下:鼠标移至弹出二维码 首先title下面引入 link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.m...
  • liona_koukou
  • liona_koukou
  • 2016-07-18 15:23:53
  • 6217
    个人资料
    等级:
    访问量: 3万+
    积分: 568
    排名: 8万+