这篇文章主要介绍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">'+
'<h5 class="media-title">小标题</h5>'+
'<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是目前最受欢迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,它还有一个响应最好的Grid系统,并且能够在手机端通用,而Bootstrap是使用许多可重用的CSS和JavaScript组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。
以上是“Bootstrap中popover如何实现鼠标移入移除显示隐藏功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。