[bootstrap] 부트스트랩 – 팝오버(Popover)

팝오버는 툴팁과 비슷한 기능을 하지만 좀더 큰 규모로 팝업창에 가깝습니다. 따라서 툴팁의 사용법과 같고 주로 버튼이나 메뉴의 상세한 추가 설명에 사용됩니다. 콘텐츠가 전혀 없으면 아무것도 나타나지 않습니다.

팝오버는 제목 부분과 콘텐츠 부분으로 나뉘며 제목은 title, 콘텐츠는 data-content 속성에 입력한 내용이 출력됩니다. 둘 중 어느 하나만 입력해도 해당 내용만 나타납니다. 자바스크립트로 작동되므로 data-toggle=”popover”가 반드시 필요합니다. 위치는 data-placement 속성에 입력되는 등 대부분이 툴팁과 같지만 팝오버는 마우스를 오버했을 때 나타나는 것이 기본입니다.

<button type=”button” class=”btn btn-default” title=”Popover title” data-container=”body” data-toggle=”popover” data-placement=”left” data-content=”Vivamus sagittis lacus vel augue laoreet rutrum faucibus.” data-trigger=”hover”>
Popover on left
</button>

 

자바스크립트로 다음과 같이 활성화합니다.

$(“[data-toggle=’popover’]”).popover();
$(“[data-toggle=’popover’]”).popover({ options });
$(“[data-toggle=’popover’]”).popover({ delay:{‘show’:500, ‘hide’:1000} });

 

• animate : 값은 true(기본) 또는 false이며 팝오버가 페이드 애니메이션되는 것을 결정합니다.
• container : 값은 string 또는 false(기본)이며 팝오버가 나타나야할 콘테이너에 제한하는 기능을 합니다. 화면 크기가 달라지는 경우 툴팁이 벗어나거나 스타일이 제대로 나타나지 않을 수 있는데, 이는 {container:’body’}로 설정합니다.
• delay : 팝오버가 나타나거나 사라지는 시간을 설정합니다. 단위는 ms로 다음과 같은 형태로 사용하며 show 또는 hide 하나만 사용할수도 있습니다. 데이터 속성은 data-delay=”{‘show’:500, ‘hide’:1000}”처럼 사용합니다.
• html : 값은 true 또는 false(기본)이며 title에 HTML 태그를 추가할 수 있습니다. XXS 공격이 우려될 경우 false로 하고 제이쿼리의 text 메서드를 사용할수도 있습니다. a 태그를 사용할 경우 url은 작은따옴표를 사용하며 링크를 클릭할 수 있도록 delay를 설정합니다.
• placement : 값으로 top, bottom, right(기본), auto가 있으며 auto를 사용할 경우 예를 들어 “auto left”로 설정하면 가능하다면 left로 나타나지만 그렇지 않을 경우 right로 나타납니다.
• selector : 자바스크립트로 사용할 경우 “a[rel=popover]”처럼 특정 선택자를 지정할 수 있습니다.
• template : 팝오버를 만드는 기본 템플릿입니다. title의 값이 .popover-inner가 있는 div에 입력됩니다.
• title : 태그에 title 속성이 없을 경우 기본 타이틀을 정할 수 있습니다.
• trigger : ‘click'(기본), ‘hover’, ‘focus’, ‘manual’은 팝오버가 나타나게 하는 방법입니다. 각각 클릭했을 때, 마우스를 올렸을 때, 탭 키로 포커스 했을 때, 수동으로 설정했을 때 나타납니다. 두 가지를 사용할 경우 ‘click’, ‘focus’와 같이 공백으로 구분합니다.
• viewport : 팝오버가 나타나는 범위를 설정할 수 있습니다.

 

메서드는 4가지가 있으며 destroy는 팝오버를 제거합니다.

$(“#element”).popover(“show“);
$(“#element”).popover(“hide“);
$(“#element”).popover(“trigger“);
$(“#element”).popover(“destory“);

 

이벤트는 4가지가 있으며 클릭이 기본이므로 툴팁처럼 delay를 설정하지 않아도 되지만 a 태그의 경우 클릭하면 사이트 상단으로 이동하므로 다음과 같이 코드를 추가합니다.

show.bs.popover : 팝오버가 보이기 전에 이벤트가 실행돼서 alert 창이 나타납니다.
shown.bs.popover : 팝오버가 보인 후에 이벤트가 실행됩니다.
hide.bs.popover : 팝오버가 감춰지기 전에 이벤트가 실행됩니다.
hidden.bs.popover : 팝오버가 감춰진 후에 이벤트가 실행됩니다.