Bootstrap popover 实现鼠标移入移除显示隐藏功能方法


Posted in Javascript onJanuary 24, 2018

该段js代码可实现 popover 下鼠标移入移除时显示、隐藏 popover 提示信息功能

var strContent = '<div class="media"><div class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">'+
         '</div>'+
         '<div class="media-body">'+
          '<h4 class="media-title">小标题</h4>'+
          '<p><strong>张三</strong> <span class="label label-primary">管理员</span></p>'+
         '</div>'+
         '</div>';
$( 'li#user_avatar' ).popover({
  trigger:'manual',
	placement:'bottom',
	html:true,
	container:'#bs-example-navbar-collapse-1',
	content:strContent,
}).on( 'mouseenter', function(){ 
  var _this = this; 
  $(this).popover( 'show' ); 
  $(this).siblings( '.popover' ).on( 'mouseleave' , function () { 
    $(_this).popover( 'hide' ); 
  }); 
}).on( 'mouseleave', function(){ 
  var _this = this; 
  setTimeout(function () { 
    if (!$( '.popover:hover' ).length) { 
      $(_this).popover( 'hide' ) 
    }
  }, 100); 
});

以上这篇Bootstrap popover 实现鼠标移入移除显示隐藏功能方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
AngularJS Controller作用域
Jan 09 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 #Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 #Javascript
详解node child_process模块学习笔记
Jan 24 #Javascript
浅谈Node.js 子进程与应用场景
Jan 24 #Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 #Javascript
深入理解node.js http模块
Jan 24 #Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 #Javascript
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
javascript实现二分查找法实现代码
2007/11/12 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python之str操作方法(详解)
2017/06/19 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
详解Python中的分支和循环结构
2020/02/11 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
中专生职业生涯规划书范文
2014/01/10 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
公司外出活动方案
2014/08/14 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
人事聘任通知
2015/04/21 职场文书
学生通报表扬范文
2015/05/04 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
趣味运动会赞词
2015/07/22 职场文书
2016年主题党日活动总结
2016/04/05 职场文书