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插件easyUi实现表单验证示例
Dec 15 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
对javascript和select部件的结合运用
2006/10/09 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
法定代表人授权委托书范文
2014/08/02 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
思想品德课教学反思
2016/02/24 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS