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从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
微信JSSDK上传图片
Aug 23 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Angular排序实例详解
2017/06/28 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
《火烧云》教学反思
2016/02/23 职场文书
公开致歉信
2019/06/24 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS