下面我就为大家分享一篇Bootstrap popover 实现鼠标移入移除显示隐藏功能方法，具有很好的参考价值，希望对大家有所帮助。
该段js代码可实现 popover 下鼠标移入移除时显示、隐藏 popover 提示信息功能
var strContent = '<p class="media"><p class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">'+
'</p>'+
'<p class="media-body">'+
'<h4 class="media-title">小标题</h4>'+
'<p><strong>张三</strong> <span class="label label-primary">管理员</span></p>'+
'</p>'+
'</p>';
$( '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);
});
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
集成vue到jquery/bootstrap项目方法？
在vue.js中实现分页中单击页码更换页面内容
在vue2.0组件中如何实现传值、通信
webpack 4.0.0-beta.0版本新特性（详细教程）
利用SpringMVC解决vue跨域请求
在vue中如何实现微信分享朋友圈,发送朋友
vue.js如何构建大型单页应用
javascript中的隐式调用的使用方法？
在webpack中使用devtool详解
以上就是在Bootstrap中使用popover如何实现显示隐藏功能的详细内容，更多请关注北冥有鱼其它相关文章！
本文转载自【PHP中文网】，希望能给您带来帮助，苟日新、日日新、又日新，生命不息，学习不止。
