Now I will share with you an article about how to implement the Bootstrap popover function by moving the mouse in to remove the display and hide function. It has a good reference value and I hope it will be helpful to everyone.
This js code can realize the function of displaying and hiding the popover prompt information when the mouse is moved into and removed from the 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); });
The above is what I compiled Everyone, I hope it will be helpful to everyone in the future.
Related articles:
How to integrate vue into jquery/bootstrap projects?
Implementing paging in vue.js by clicking the page number to change the page content
How to implement value passing and communication in the vue2.0 component
New features of webpack 4.0.0-beta.0 version (detailed tutorial)
Use SpringMVC to solve vue cross-domain requests
How to implement WeChat sharing in Moments and send friends in vue
How to build a large single-page application with vue.js
How to use implicit calls in javascript?
Detailed explanation of using devtool in webpack
The above is the detailed content of How to use popover in Bootstrap to implement show-hide function. For more information, please follow other related articles on the PHP Chinese website!