부트스트랩 4 팝오버
부트스트랩 4 팝오버
Popover 구성 요소는 도구 설명과 유사합니다. 사용자가 요소를 클릭할 때 나타나는 팝업 상자입니다. 차이점은 팝오버에 훨씬 더 많은 콘텐츠가 포함될 수 있다는 것입니다.
팝오버 전환팝오버를 만드는 방법
팝오버를 생성하려면 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>
참고: 배치 속성은 공간이 충분하지 않으면 예상대로 작동하지 않습니다. 예를 들어: 페이지 상단(공간이 없는 곳)의 상단 배치를 사용하는 경우, 대신 요소 아래 또는 오른쪽(공간이 있는 곳)에 팝오버를 표시합니다.
팝오버 닫기
기본적으로 요소를 다시 클릭하면 팝오버가 닫힙니다. 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 로 이동하십시오 .