Rumah > Artikel > hujung hadapan web > 在Bootstrap中使用popover如何实现显示隐藏功能
下面我就为大家分享一篇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); });
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
webpack 4.0.0-beta.0版本新特性(详细教程)
Atas ialah kandungan terperinci 在Bootstrap中使用popover如何实现显示隐藏功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!