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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기