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 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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
JAVA/JSP学习系列之四
2006/10/09 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP 字符串分割和比较
2009/10/06 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
php无限极分类实现方法分析
2019/07/04 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Linux下为不同版本python安装第三方库
2016/08/31 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
python验证身份证信息实例代码
2019/05/06 Python
django实现支付宝支付实例讲解
2019/10/17 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
茶叶生产计划书
2014/01/10 职场文书
手机被没收检讨书
2014/02/22 职场文书
平安建设汇报材料
2014/12/29 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书