Popover는 툴팁과 유사합니다. 다만, 툴팁은 마우스를 올리면 표시되고, Popover는 클릭시 창이 뜹니다. 또한, 창에 담는 내용이 툴팁에 비교하여 훨씬 많을 수 있습니다.

Popover 만들기

Popover를 만들려면 data-toggle="popover"속성을 요소에 추가합니다.

title속성을 사용하여 popover의 헤더 텍스트를 지정하고 data-content속성을 사용하여 popover본문 내용을 지정합니다.

<a href="#" data-toggle="popover" title="실전홈페이지제작" data-content="모든 강좌를 이용할 수 있습니다">유료강좌</a>

Popover는 jQuery로 초기화해야 합니다. 지정된 요소를 선택하고 popover()메소드를 호출합니다.

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

Popover의 위치 설정하기

기본값은 요소의 오른쪽에 나타납니다.

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>

Popover 닫기

기본적으로 요소를 다시 클릭하면 Popover가 닫힙니다. 그러나 요소 외부를 클릭할 때 팝업을 닫기 위해 data-trigger = "focus"속성을 사용할 수 있습니다.

<a href="#" title="popover 닫기" data-toggle="popover" data-trigger="focus" data-content="팝업 닫기를 원하면 문서의 아무 곳이나 클릭하세요.">Click me</a>

** 요소 위로 마우스 포인터를 가져 가면 팝업이 표시되도록 하려면 data-trigger속성에 "hover"값을 사용합니다.

<a href="#" title="hover시 창띄우기" data-toggle="popover" data-trigger="hover" data-content="클릭하지 않아도 마우스hover면 창 띄우기">Hover over me</a>