여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 팝오버
Bootstrap – Bootstrap 4 팝오버
12개월전 작성
1년전 수정



Bootstrap 4 팝오버

팝오버 구성 요소는 툴팁과 유사하다.
사용자가 요소를 클릭할 때 나타나는 팝업 상자다.
차이점은 팝오버에 훨씬 더 많은 콘텐츠가 포함될 수 있다는 것이다.

팝오버를 만드는 방법

팝오버를 만들려면 data-toggle=”popover” 요소에 속성을 추가한다.

title 속성을 사용하여 팝오버의 헤더 텍스트를 지정하고, data-content 속성을 사용하여 팝오버 본문 내부에 표시되어야 하는 텍스트를 지정한다.

예제
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

<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” 속성을 사용할 수 있다.

예제 1
<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>
기본 예시
예제 보기
예제 2

요소 위로 마우스 포인터를 이동할 때 팝오버가 표시되도록 하려면 값이 “hover”인 data-trigger 속성을 사용한다.

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그