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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
js倒计时小程序
Nov 05 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
Vue.set 全局操作简单示例
Sep 19 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&amp;&amp;mysql)三
2006/10/09 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JS循环遍历JSON数据的方法
2014/07/08 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
详解python之heapq模块及排序操作
2019/04/04 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
车间调度岗位职责
2013/11/30 职场文书
培训研修方案
2014/06/06 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
MYSQL常用函数介绍
2022/05/05 MySQL