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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
JavaScript的目的分析
2007/01/05 Javascript
jQuery技巧总结
2011/01/01 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JS验证字符串功能
2017/02/22 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
学习python的几条建议分享
2013/02/10 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python变量类型知识点总结
2019/02/18 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
文员自我评价怎么写
2013/09/19 职场文书
给老婆的保证书范文
2014/04/28 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
公司股份合作协议书
2014/12/07 职场文书
爱的教育观后感
2015/06/17 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript