Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
作者：田小涛
下面小编就为大家分享一篇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 实现鼠标移入移除显示隐藏功能方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。