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 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
javascript实现前端分页效果
Jun 24 Javascript
详解JavaScript 的执行机制
Sep 18 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选项与信息函数的使用详解
2013/05/10 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
javascript解析json实例详解
2014/11/05 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python使用mysql数据库示例代码
2017/05/21 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python cs架构实现简单文件传输
2020/03/20 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
英语自我评价范文
2014/01/24 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
假期安全教育广播稿
2014/10/04 职场文书
公司捐书倡议书
2015/04/27 职场文书
爱的教育观后感
2015/06/17 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书