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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容