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 DOM 添加事件
Feb 14 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
layui的table中显示图片方法
Aug 17 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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 上传功能实例代码
2010/04/13 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
使用angularjs创建简单表格
2016/01/21 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Python中的super()方法使用简介
2015/08/14 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
美德少年事迹材料
2014/01/23 职场文书
环保建议书作文
2014/03/12 职场文书
自强之星事迹材料
2014/05/12 职场文书
学校四群教育实施方案
2014/06/12 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫