Bootstrap中popover如何實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能

這篇文章主要介紹Bootstrap中popover如何實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

該段js代碼可實(shí)現(xiàn) popover 下鼠標(biāo)移入移除時(shí)顯示、隱藏 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">小標(biāo)題</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是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而B(niǎo)ootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類(lèi)型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。

以上是“Bootstrap中popover如何實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！