使用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 时,不能向表 &#39;OrderList&#39; 中的标识列插入显式值
问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...
-
当 IDENTITY_INSERT 设置为 OFF 时,不能向表 &#39;#TT&#39; 中的标识列插入显式值。 sql server 临时表
当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值.我是在SqlServer写存储过程中遇到的这个错误,当时就心想:临时表怎么会有主键呢,我也没有设置主 ...
-
ios8 tableView设置滑动删除时 显示多个按钮
** * tableView:editActionsForRowAtIndexPath: //设置滑动删除时显示多个按钮 * UITableViewRowAction ...
-
当 IDENTITY_INSERT 设置为 OFF 时,不能为表‘XXX’中的标识列插入显式值。
在创建事务复制时,很多时候不一定使用快照进行初始化,而是使用备份还原初始化.当对有标识列(即identity的自增列)的表进行复制的时候,使用备份还原初始化搭建起来的复制常常就会报错,即:当 IDEN ...
-
RHCE 系列(二):如何进行包过滤、网络地址转换和设置内核运行时参数
正如第一部分(“设置静态网络路由”)提到的,在这篇文章(RHCE 系列第二部分),我们首先介绍红帽企业版 Linux 7(RHEL)中包过滤和网络地址转换(NAT)的原理,然后再介绍在某些条件发生变化 ...
随机推荐
-
hibernate开发(2)
1 hibernate 的缓存机制 在程序运行中,hibernate要不断访问物理数据库,为了降低访问频率,提升性能,会复制一部分数据到缓存中,使得hibernate可以从缓存中读写数据,然后在特定时 ...
-
HTML编程
通俗的解释:HTML是一个没有穿衣服的人 CSS是穿上了华丽衣服的人 JS是使这个人动起来 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万 ...
-
[反汇编练习] 160个CrackMe之024
[反汇编练习] 160个CrackMe之024. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
-
5个Xcode开发调试技巧
转自Joywii的博客,原文:Four Tips for Debugging in XCode Like a Bro 1.Enable NSZombie Objects(开启僵尸对象) Enab ...
-
docker核心概念及centos6下安装
Docker三大核心概念 镜像 容器 仓库 镜像 docker镜像类似于虚拟机镜像,可以将它理解为一个面向Docker引擎的只读模板,包含了文件系统. 容器 1.容器是从镜像创建的应用运行实例,容器和 ...
-
[Count the numbers satisfying (m + sum(m) + sum(sum(m))) equals to N]
Given an integer N, the task is to find out the count of numbers M that satisfy the condition M + su ...
-
PAT 乙级 1076 Wifi密码 (15)
下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用wifi,又怕耽误亲们的学习,现将wifi密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一换.谢 ...
-
【delphi】关键字详解
absolute {它使得你能够创建一个新变量, 并且该变量的起始地址与另一个变量相同.} var Str: ]; StrLen: Byte absolute Str; {这个声明指定了变量StrLe ...
-
Shell脚本的学习(一)
Shell脚本的学习(一) 一)代码式shell脚本简介 1.下载 Xshell 5 建一个文件夹 mkdri home/data ; 1)查看一个在data里建一个1.sh 查看是否建立成功. 2) ...
-
c++ 对象复制引用时何时调用构造函数、析构函数
class TEST{ private : public : TEST() {std::cout << "constructor" << std::endl ...