[Bootstrap] Popover

1. 기본 사용법

• Popover는 툴팁처럼 작은 팝업창이지만, 더 많은 텍스트나 HTML 콘텐츠를 포함 가능
• 일반적으로 클릭 시 나타남

<button type="button" class="btn btn-primary"
        data-bs-toggle="popover"
        title="Popover 제목"
        data-bs-content="팝오버 본문 내용입니다.">
  Toggle popover
</button>

• `data-bs-toggle="popover"`: 팝오버 활성화
• `title`: 팝오버 헤더 텍스트
• `data-bs-content`: 팝오버 본문 내용

---

2. JavaScript 초기화 (필수)

• 팝오버는 JS 초기화가 필수

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
  var popoverList = popoverTriggerList.map(function (el) {
    return new bootstrap.Popover(el);
  });
</script>

 

---

3. 팝오버 위치 설정

• `data-bs-placement` 속성을 통해 팝오버 위치 지정 가능

위치	속성 값
위	`"top"`
아래	`"bottom"`
왼쪽	`"left"`
오른쪽 (기본값)	`"right"`

<a href="#" data-bs-toggle="popover"
   data-bs-placement="top"
   title="팝오버 제목"
   data-bs-content="위쪽 팝오버입니다.">
   Top
</a>

📌 주의: 공간이 부족하면 자동으로 다른 방향에 표시됨.

---

4. 팝오버 닫기 방식

1. 클릭 후 다시 클릭으로 닫기 (기본)

2. 외부 클릭 시 닫기

<a href="#" data-bs-toggle="popover"
   data-bs-trigger="focus"
   title="팝오버"
   data-bs-content="밖을 클릭하면 닫힙니다.">
   Click me
</a>

3. 호버(hover)로 열기

<a href="#" data-bs-toggle="popover"
   data-bs-trigger="hover"
   title="Hover Popover"
   data-bs-content="마우스를 올리면 나타납니다.">
   Hover over me
</a>