zoukankan      html  css  js  c++  java
  • bootstrap的popover在trigger设置为hover时不隐藏popover

    使用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”属性,如果存在则取消隐藏。

  • 相关阅读:
    SpringMVC简单总结-day02
    SpringMVC简单总结-day01
    SpringMVC通过Ajax处理数据,出现406问题
    Java特殊时间格式转化
    PyQuery用法详解
    解决:CentOS 7下yum install mysql-server无包可用问题
    数据库编程接口
    python高级文件操作
    python生成随机数、随机字符串
    【转】错误日志ID8021来源BROWSER导致电脑死机
  • 原文地址:https://www.cnblogs.com/mschen/p/5741165.html
Copyright © 2011-2022 走看看