使用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在trigger设置为hover时不隐藏popover的更多相关文章

  1. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  2. mysql trigger 设置错误ERROR1419

    mysql 触发器设置 background: mysql触发器可以在对数据库数据进行变更(插入,修改,删除)之前或之后触发操作. 在设置mysql触发器时提示: ERROR 1419 (HY000) ...

  3. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  4. Saiku设置展示table数据不隐藏空的行数据信息(二十六)

    Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...

  5. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值

    问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...

  6. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值。 sql server 临时表

    当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值.我是在SqlServer写存储过程中遇到的这个错误,当时就心想:临时表怎么会有主键呢,我也没有设置主 ...

  7. ios8 tableView设置滑动删除时 显示多个按钮

      ** *  tableView:editActionsForRowAtIndexPath:     //设置滑动删除时显示多个按钮 *  UITableViewRowAction          ...

  8. 当 IDENTITY_INSERT 设置为 OFF 时,不能为表‘XXX’中的标识列插入显式值。

    在创建事务复制时,很多时候不一定使用快照进行初始化,而是使用备份还原初始化.当对有标识列(即identity的自增列)的表进行复制的时候,使用备份还原初始化搭建起来的复制常常就会报错,即:当 IDEN ...

  9. RHCE 系列(二):如何进行包过滤、网络地址转换和设置内核运行时参数

    正如第一部分(“设置静态网络路由”)提到的,在这篇文章(RHCE 系列第二部分),我们首先介绍红帽企业版 Linux 7(RHEL)中包过滤和网络地址转换(NAT)的原理,然后再介绍在某些条件发生变化 ...

随机推荐

  1. PHP+lghttpd + postgresql 环境搭建

    PHP+lghttpd + postgresql 环境搭建 Linux 下PHP环境搭建 安装环境:PHP+lghttpd + postgresql 1:yum install lighttpd 红旗 ...

  2. 简体中文 — ANSI Common Lisp 中文版

    简体中文 - ANSI Common Lisp 中文版 简体中文¶

  3. git for windows (又名 msysgit)如何记住用户名和密码

    创建存储用户名密码的文件 在home文件夹,一般是 C:\Documents and Settings\Administrator 下建立文件 .git-credentials (windows下不允 ...

  4. DOM4J解析XML文档

    Tip:DOM4J解析XML文档 Dom4j是一个简单.灵活的开放源代码的库.Dom4j是由早期开发JDOM的人分离出来而后独立开发的.与JDOM不同的是,dom4j使用接口和抽象基类,虽然Dom4j ...

  5. 虚幻4随笔4 从project開始

     前文说到UE3開始.虚幻就使用了UnrealBuildTool(下面简称UBT)来编译和生成代码. 为什么这么做而不是使用VS是非常好理解的:由于VS跨平台会比較麻烦.像虚幻这样体量的proje ...

  6. frontend http 前端名字定义问题

    https://www.winfae.com/admin/api/menu haproxy 日志: Jun 24 13:04:49 localhost haproxy[14817]: 115.236. ...

  7. Oracle“记录被另一个用户锁住” 无法更新删除的解决办法

    1.查看数据库锁,诊断锁的来源及类型: select object_id,session_id,locked_mode from v$locked_object; 或者用以下命令: select b. ...

  8. 2015年十大热门Android开源新项目

    2015年十大热门Android开源新项目 2015 即将结束,又到了大家喜闻乐见的年终盘点时刻啦,今天给大家盘点一下 2015 年 Android 开发领域新出现的 10 大热门开源项目.数据来自于 ...

  9. [cocos2d-x]屏幕自适应解决的方法

    近期在写一个项目,要求pc,ipad,andriod平台上都能够执行,所以选择用cocos2d-x来开发. 我们的资源大小是1024*768的,在pc上和苹果上都是没有问题的,但是到了andriod上 ...

  10. _tcscat在Debug和Release根据问题

    背景: 因此,例如,在下面的代码段,作用是得到的路径当前程序(C:\work\A.exe),然后"A.exe"拆除,组装的"C:\work\inject.dll" ...