在Bootstrap中使用popover如何實現顯示隱藏功能

下面我就為大家分享一篇Bootstrap popover 實作滑鼠移入移除顯示隱藏功能方法，具有很好的參考價值，希望對大家有幫助。

該段js程式碼可實現popover 下滑鼠移入移除時顯示、隱藏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); 
});

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

整合vue到jquery/bootstrap專案方法？

在vue.js中實現分頁中點擊頁碼更換頁面內容

#在vue2.0元件中如何實作傳值、通信

webpack 4.0.0-beta.0版本新功能（詳細教學）

利用SpringMVC解決vue跨域請求

#在vue中如何實作微信分享朋友圈,發送朋友

#vue.js如何建立大型單頁應用程式

javascript中的隱式呼叫的使用方法？

在webpack中使用devtool詳解

以上是在Bootstrap中使用popover如何實現顯示隱藏功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！