Bootstrap でポップオーバーを使用して表示/非表示機能を実装する方法

それでは、Bootstrap ポップオーバーを使用して、マウスが移動したときの表示と非表示を削除する方法に関する記事を共有します。これは非常に参考になるものであり、皆様のお役に立てれば幸いです。

このjsコードは、マウスがポップオーバーに出入りしたときにポップオーバープロンプト情報を表示および非表示にする機能を実現できます

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 のクロスドメイン要求を解決する

友達のサークルで WeChat 共有を実装し、vue で友達を送信する方法

vue.js の構築方法JavaScript での大きな単一ページのアプリケーション

暗黙的な呼び出しを使用するには?

webpackでのdevtoolの使い方の詳しい説明

以上がBootstrap でポップオーバーを使用して表示/非表示機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。