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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
怎么清空javascript数组
May 11 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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的远程多会话调试
2017/09/21 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python学生管理系统开发
2019/01/30 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python的几种主动结束程序方式
2019/11/22 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
岗位职责说明书
2014/05/07 职场文书
2015年班组工作总结
2015/04/20 职场文书
优秀教师工作总结2015
2015/07/22 职场文书