BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法


Posted in Javascript onApril 03, 2016

弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。

1 设置延时, 超过该延时未移入弹窗则弹窗隐藏

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

2 控制不消失代码

在Tooltip.prototype.enter = function (obj) {中的

clearTimeout(self.timeout)后加入

if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}

bootstrap版本:v3.3.6

下面给大家补充弹出框(Popover)用法

弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面。您可以有以下两种方式添加弹出框(popover):

通过 data 属性:如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>

通过 JavaScript:通过 JavaScript 启用弹出框(popover):

$('#identifier').popover(options)

弹出框(Popover)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):

$(function () { $("[data-toggle='popover']").popover(); });
Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 #Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 #Javascript
JQuery解析XML的方法小结
Apr 02 #Javascript
javascript HTML5文件上传FileReader API
Mar 27 #Javascript
JavaScript中文件上传API详解
Apr 01 #Javascript
jquery表单验证插件formValidator使用方法
Apr 01 #Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Javascript - HTML的request类
2006/07/15 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
webpack3之loader全解析
2017/10/26 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
在Python中增加和插入元素的示例
2018/11/01 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
大学军训感言800字
2014/02/27 职场文书
教师读书活动总结
2014/05/07 职场文书
读书之星事迹材料
2014/05/12 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书