How to use popover in Bootstrap to implement show-hide function

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 = &#39;<p class="media"><p class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">&#39;+
         &#39;</p>&#39;+
         &#39;<p class="media-body">&#39;+
          &#39;<h4 class="media-title">小标题</h4>&#39;+
          &#39;<p><strong>张三</strong> <span class="label label-primary">管理员</span></p>&#39;+
         &#39;</p>&#39;+
         &#39;</p>&#39;;
$( &#39;li#user_avatar&#39; ).popover({
  trigger:&#39;manual&#39;,
	placement:&#39;bottom&#39;,
	html:true,
	container:&#39;#bs-example-navbar-collapse-1&#39;,
	content:strContent,
}).on( &#39;mouseenter&#39;, function(){ 
  var _this = this; 
  $(this).popover( &#39;show&#39; ); 
  $(this).siblings( &#39;.popover&#39; ).on( &#39;mouseleave&#39; , function () { 
    $(_this).popover( &#39;hide&#39; ); 
  }); 
}).on( &#39;mouseleave&#39;, function(){ 
  var _this = this; 
  setTimeout(function () { 
    if (!$( &#39;.popover:hover&#39; ).length) { 
      $(_this).popover( &#39;hide&#39; ) 
    }
  }, 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!