부트스트랩 팝오버 플러그인
팝오버 플러그인
Popover 플러그인은 툴팁과 유사합니다. 사용자가 요소를 클릭할 때 나타나는 팝업 상자입니다. 차이점은 팝오버에 훨씬 더 많은 콘텐츠가 포함될 수 있다는 것입니다.
팁: 플러그인은 개별적으로(Bootstrap의 개별 "popover.js" 파일 사용) 또는 한 번에 모두 포함("bootstrap.js" 또는 "bootstrap.min.js" 사용)할 수 있습니다.
팝오버를 만드는 방법
팝오버를 생성하려면 data-toggle="popover"
요소에 속성을 추가하십시오.
속성을 사용 title하여 팝오버의 헤더 텍스트를 지정하고 data-content속성을 사용하여 팝오버 본문 내부에 표시되어야 하는 텍스트를 지정합니다.
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
참고: 팝오버는 jQuery로 초기화해야 합니다. 지정된 요소를 선택하고 popover()메서드를 호출합니다.
다음 코드는 문서의 모든 팝오버를 활성화합니다.
예시
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
팝오버 위치 지정
기본적으로 팝오버는 요소의 오른쪽에 나타납니다.
속성을 사용하여 data-placement요소의 위쪽, 아래쪽, 왼쪽 또는 오른쪽에 팝오버 위치를 설정합니다.
예시
<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" 값과 함께 data-placement 속성을 사용할 수도 있습니다. 그러면 브라우저가 팝오버의 위치를 결정할 수 있습니다. 예를 들어 값이 "자동 왼쪽"이면 팝오버는 가능한 경우 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시됩니다.
팝오버 닫기
기본적으로 요소를 다시 클릭하면 팝오버가 닫힙니다. data-trigger="focus"그러나 요소 외부를 클릭할 때 팝오버를 닫는 속성을 사용할 수 있습니다 .
예시
<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>
팁: 요소 위로 마우스 포인터를 이동할 때 팝오버가 표시되도록 하려면 data-trigger"hover" 값이 있는 속성을 사용하십시오.
예시
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
완전한 부트스트랩 팝오버 참조
모든 팝오버 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS Popover Reference 로 이동하십시오 .