[basic] BS5 - Popover (BS팝오버) ★ - 클릭형말풍선

1. Popover 정의
2. Popover 생성 구문
3. Popover 위치
4. Popover 닫기 - 해당 요소 외 아무곳이나 클릭하면 닫기
5. Popover 툴팁화 - mouseover시 열기, mouseleave시 닫기

Popover 정의

 

사용자가 요소를 클릭하면 나타나는 팝업 상자.

※ 해당 요소를 다시 클릭하면 팝업 상자 닫힘.

 

---

 

1.

마우스허버 시 나타나는 툴팁(Tooltip)과 유사하나,

툴팁(Tooltip)보다 훨씬 더 많은 내용을 추가 가능.

 

2.

기본적으로 해당 요소를 클릭해 팝업상자 제어하나,

아래 속성 이용해 focus/hover 방법으로 제어 가능.

• data-bs-trigger="focus"
• data-bs-trigger="hover"

 

Popover 생성 구문

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="팝업창제목" data-bs-content="팝업창내용">표시문구</button>

<script>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))

var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {

  return new bootstrap.Popover(popoverTriggerEl)

})

</script>

※ 팝오버 작동하려면 JavaScript로 초기화해야 함.

※ 위 JS 코드 사용 시, 모든 팝오버를 활성화 시킴. 

Popover 위치

 

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-placement="top" content="팝업창내용">표시문구</a>

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-placement="bottom" content="팝업창내용">표시문구</a>

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-placement="left" content="팝업창내용">표시문구</a>

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-placement="right" content="팝업창내용">표시문구</a>

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-placement="auto" content="팝업창내용">표시문구</a>

 

PS. 공간 충분한 경우에만 제대로 작동. (공간 부족 시 다른 쪽에 뜸.)

Popover 닫기 - 해당 요소 외 아무곳이나 클릭하면 닫기

 

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="팝업창내용">표시문구</a>

 

Popover 툴팁화 - mouseover시 열기, mouseleave시 닫기

 

<a href="#" title="팝업창제목" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="팝업창내용">표시문구</a>