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); 
});

위 내용은 모두에게 도움이 되기를 바랍니다. 앞으로도 모든 사람에게.

관련 기사:

jquery/bootstrap 프로젝트에 vue를 통합하는 방법은 무엇입니까?

페이지 내용을 변경하기 위해 페이지 번호를 클릭하여 vue.js에서 페이징 구현

vue2.0 구성 요소에서 값 전달 및 통신 구현 방법

webpack 4.0.0-beta의 새로운 기능 .0 버전(자세한 튜토리얼)

SpringMVC를 사용하여 vue 도메인 간 요청 해결

친구 서클에서 WeChat 공유를 구현하고 vue에서 친구를 보내는 방법

vue.js 구축 방법 대규모 단일 페이지 애플리케이션

in javascript 암시적 호출을 사용하는 방법은 무엇입니까?

webpack에서 devtool 사용에 대한 자세한 설명

위 내용은 Bootstrap에서 팝오버를 사용하여 표시 숨기기 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!