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不会隐藏了。
重点:
- 对popover增加 delay: {hide: 100},让hide事件等待100毫秒再触发; 
- 在shown.bs.popover事件中为popover元素绑定鼠标事件,在事件中为popover触发元素增加或删除“in”属性; 
- 在hide.bs.popover事件中检查触发元素是否存在“in”属性,如果存在则取消隐藏。 
bootstrap的popover在trigger设置为hover时不隐藏popover的更多相关文章
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
		默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ... 
- mysql trigger 设置错误ERROR1419
		mysql 触发器设置 background: mysql触发器可以在对数据库数据进行变更(插入,修改,删除)之前或之后触发操作. 在设置mysql触发器时提示: ERROR 1419 (HY000) ... 
- JS实现类似QQ好友头像hover时显示资料卡的效果
		一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ... 
- Saiku设置展示table数据不隐藏空的行数据信息(二十六)
		Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ... 
- 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值
		问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ... 
- 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值。 sql server 临时表
		当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值.我是在SqlServer写存储过程中遇到的这个错误,当时就心想:临时表怎么会有主键呢,我也没有设置主 ... 
- ios8 tableView设置滑动删除时 显示多个按钮
		** * tableView:editActionsForRowAtIndexPath: //设置滑动删除时显示多个按钮 * UITableViewRowAction ... 
- 当 IDENTITY_INSERT 设置为 OFF 时,不能为表‘XXX’中的标识列插入显式值。
		在创建事务复制时,很多时候不一定使用快照进行初始化,而是使用备份还原初始化.当对有标识列(即identity的自增列)的表进行复制的时候,使用备份还原初始化搭建起来的复制常常就会报错,即:当 IDEN ... 
- RHCE 系列(二):如何进行包过滤、网络地址转换和设置内核运行时参数
		正如第一部分(“设置静态网络路由”)提到的,在这篇文章(RHCE 系列第二部分),我们首先介绍红帽企业版 Linux 7(RHEL)中包过滤和网络地址转换(NAT)的原理,然后再介绍在某些条件发生变化 ... 
随机推荐
- Delphi自写组件:可设置颜色的按钮(改成BS_OWNERDRAW风格,然后CN_DRAWITEM)
			unit ColorButton; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, StdCtrls; ... 
- spring-framework-3.2.4.RELEASE 综合hibernate-release-4.3.5.Final一个错误Caused by: java.lang.NoClassDefFound
			LZ一体化的今天spring-framework-3.2.4.RELEASE 综合hibernate-release-4.3.5.Final一个错误Caused by: java.lang.NoCla ... 
- ubuntu12 环境下编译freerdp
			有时候需要从linux环境下远程连接到windows的环境,可以采用freerdp.freerdp是一个linux下开源的工具,在Ubuntu下可以直接用 apt-get install freerd ... 
- RBAC用户角色权限设计方案
			RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用 户-角色 ... 
- CountDownLatch和CyclicBarrier的区别(转)
			在网上看到很多人对于CountDownLatch和CyclicBarrier的区别简单理解为CountDownLatch是一次性的,而CyclicBarrier在调用reset之后还可以继续使用.那如 ... 
- junit4同一时候測试多个測试类
			两个分别须要的測试类 TestSuit001 package com.test.junit; import org.junit.Test; public class TestSuit001 { @Te ... 
- BI中事实表和维度表的定义
			一个典型的样例是,把逻辑业务比作一个立方体,产品维.时间维.地点维分别作为不同的坐标轴,而坐标轴的交点就是一个详细的事实.也就是说事实表是多个维度表的一个交点.而维度表是分析事实的一个窗体. 首先介绍 ... 
- 建立地方Jekyll周边环境
			近期使用github建立一个博客,只是要了解markdown语法,因为markdown后写的不是立即可见.所以,每一个成品都要经过在线调试,在线调试已经上线的文章,每次上线有反复git add, gi ... 
- 它们的定义iOS双击Home截图按键开关
			<pre name="code" class="objc"><p>双击假设Home,我会去iOS App的switcher页面,这里列出 ... 
- 新版SDK自己主动加入PlaceholderFragment的思考
			自从Android SDK更新到22.6.3,发现新建Activity的时候,会自己主动生成一个Fragment.这个Fragment是activity的静态内部类.同一时候生成了一个xml叫frag ... 
