Popover 플러그인
Popover 플러그인은 툴팁과 유사하다; 그것은 사용자가 요소를 클릭 할 때 나타나는 팝업 상자입니다. 차이가 있다는 popover 많은 콘텐츠를 포함 할 수있다.
팁 : 플러그인은 (사용하여 개별적으로 포함시킬 수 Bootstrap's 개인 "popover.js" (사용, 또는 모두 한 번에 파일) "bootstrap.js" 또는 "bootstrap.min.js" ).
어떻게 만들 수있는 Popover
만들려면 popover , 추가 data-toggle="popover" 요소에 속성을.
사용 title 팝 오버의 헤더 텍스트를 지정하고 사용하는 속성을 data-content 안에 표시해야 할 텍스트를 지정하는 속성을 popover's 몸을 :
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> 참고 : Popovers jQuery를 사용하여 초기화해야 지정된 요소를 선택하고 전화 popover() 메소드를.
다음 코드는 모든 가능하게 할 것이다 popovers 문서를 :
예
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
»그것을 자신을 시도 위치 Popovers
기본적으로 popover 요소의 오른쪽에 표시됩니다.
사용 data-placement 의 위치 설정 특성을 popover 위, 아래, 왼쪽 또는 요소의 오른쪽을 :
예
<a href="#"
title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#"
title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#"
title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#"
title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
»그것을 자신을 시도 팁 :의 값으로 데이터 배치 속성을 사용할 수 있습니다 "auto" 브라우저에서의 위치를 결정하게됩니다, popover . 값이 예를 들어, "auto left" 1, popover 달리 오른쪽에, 가능하면 왼쪽에 표시됩니다.
닫기 Popovers
기본적으로 popover 다시 요소를 클릭하면 닫힙니다. 그러나 사용할 수있는 data-trigger="focus" 가까운 것 속성 popover 요소 외부를 클릭 할 때를 :
예
<a href="#" title="Dismissible popover" data-toggle="popover"
data-trigger="focus" data-content="Click anywhere in the document to close
this popover">Click me</a>
»그것을 자신을 시도 팁 : 당신이 원한다면 popover 당신이 사용 요소 위에 마우스 포인터를 이동할 때 표시 할 data-trigger 의 값과 속성을 "hover" :
예
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
»그것을 자신을 시도 완료 Bootstrap Popover 참조
모두의 완전한 참고 popover 옵션, 방법 및 이벤트, 우리로 이동 Bootstrap JS Popover 참조 .