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 相关文章推荐
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
有关Promises异步问题详解
Nov 13 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
使用node.js搭建服务器
May 20 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue 限制input只能输入正数的操作
Aug 05 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获取网站域名和地址的代码
2008/08/17 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python @property的用法及含义全面解析
2018/02/01 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
基于matplotlib xticks用法详解
2020/04/16 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
如何进行Linux分区优化
2013/02/12 面试题
linux面试相关问题
2013/04/28 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
员工工作表扬信
2015/05/05 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
解析MySQL索引的作用
2022/03/03 MySQL