Bootstrap的popover(弹出框)2秒后定时消失的实现代码


Posted in Javascript onFebruary 27, 2017

Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。

先在目标DOM结构中弹出小提示,然后2秒后提示消失

<input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement="top">
<script>
function showPopover(target, msg) {
  target.attr("data-original-title", msg);
  $('[data-toggle="tooltip"]').tooltip();
  target.tooltip('show');
  target.focus();
  //2秒后消失提示框
  var id = setTimeout(
    function () {
      target.attr("data-original-title", "");
      target.tooltip('hide');
    }, 2000
  );
}
showPopover($("#tableName"),"表名已存在");
</script>

以上所述是小编给大家介绍的Bootstrap的popover(弹出框)2秒后定时消失,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
详解Vue router路由
Nov 20 Vue.js
jQuery实现元素的插入
Feb 27 #Javascript
jQuery实现导航回弹效果
Feb 27 #Javascript
使用jQuery操作DOM的方法小结
Feb 27 #Javascript
jQuery模拟淘宝购物车功能
Feb 27 #Javascript
原生js实现轮播图
Feb 27 #Javascript
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
You might like
php获取一个变量的名字的方法
2014/09/05 PHP
PHP中的替代语法介绍
2015/01/09 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
详解python中的异常捕获
2020/12/15 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
设计大赛策划方案
2014/06/13 职场文书
维稳工作情况汇报
2014/10/27 职场文书
团员个人总结
2015/02/26 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
董事长新年致辞
2015/07/29 职场文书
庭外和解协议书
2016/03/23 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang