首页 > 编程 > JavaScript > 正文

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

2019-11-19 14:29:02
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表