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 相关文章推荐
将json当数据库一样操作的javascript lib
Oct 28 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
script标签属性用type还是language
Jan 21 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
开发一个封装iframe的vue组件
Mar 29 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的sso单点登录实现方法
2015/01/08 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
详解Django的CSRF认证实现
2018/10/09 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python psutil监控进程实例
2019/12/17 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
jupyter notebook 多行输出实例
2020/04/09 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL