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 获取网页参数系统
Jul 19 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现可拖拽的dialog弹框
May 13 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初学者头疼问题总结
2006/07/08 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
MSN消息提示类
2006/09/05 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
python字符串连接方法分析
2016/04/12 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
采购内勤岗位职责
2013/12/10 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
自我管理的活动方案
2014/08/25 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
同学会感言
2015/07/30 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript