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

 更新时间:2018年01月24日 11:40:22   作者:田小涛  
下面小编就为大家分享一篇Bootstrap popover 实现鼠标移入移除显示隐藏功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

该段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 实现鼠标移入移除显示隐藏功能方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS实现从连接中获取youtube的key实例

    JS实现从连接中获取youtube的key实例

    这篇文章主要介绍了JS实现从连接中获取youtube的key的方法,涉及javascript字符串操作的相关技巧,需要的朋友可以参考下
    2015-07-07
  • 使用JavaScript中的lodash编写双色球效果

    使用JavaScript中的lodash编写双色球效果

    本文通过实例代码给大家介绍的使用JavaScript中的lodash编写双色球效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • 如何使用JavaScript检测空闲的浏览器选项卡

    如何使用JavaScript检测空闲的浏览器选项卡

    这篇文章主要介绍了如何使用JavaScript检测空闲的浏览器选项卡,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 简单介绍JavaScript数据类型之隐式类型转换

    简单介绍JavaScript数据类型之隐式类型转换

    这篇文章主要介绍了简单介绍JavaScript数据类型之隐式类型转换的相关资料,需要的朋友可以参考下
    2015-12-12
  • 微信小程序-详解数据缓存

    微信小程序-详解数据缓存

    每个微信小程序都可以有自己的本地缓存,本篇文章主要介绍了微信小程序-详解数据缓存,可以通过函数可以对本地缓存进行设置、获取和清理,有兴趣的可以了解一下。
    2016-11-11
  • 简单实现js拖拽效果

    简单实现js拖拽效果

    这篇文章主要教大家如何简单实现js拖拽效果,很详细的js拖拽效果实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript运动框架 链式运动到完美运动(五)

    JavaScript运动框架 链式运动到完美运动(五)

    这篇文章主要为大家详细介绍了JavaScript运动框架的第五部分,链式运动到完美运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Bootstrap表单简单实现代码

    Bootstrap表单简单实现代码

    这篇文章主要为大家详细介绍了Bootstrap表单的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 详解JS去重及字符串奇数位小写转大写

    详解JS去重及字符串奇数位小写转大写

    本篇文章主要介绍了详解JS去重及字符串奇数位小写转大写 ,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • 微信小程序转换uniapp的迁移步骤以及遇到的问题总结

    微信小程序转换uniapp的迁移步骤以及遇到的问题总结

    最近公司有个需求,第一次遇到,把原生的微信小程序代码转换为uni-app项目,下面这篇文章主要给大家介绍了关于微信小程序转换uniapp的迁移步骤以及遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07

最新评论