Bootstrap 5 팝업

팝업

팝업(Popover) 컴포넌트는 툴팁과 유사합니다； 사용자가 요소를 클릭할 때 나타나는 팝업입니다. 차이점은 팝업이 더 많은 내용을 포함할 수 있다는 점입니다.

팝업 생성 방법

팝업을 생성하려면, data-bs-toggle="popover" 속성을 요소에 추가합니다.

사용해 주세요 title 속성은 팝업 제목 텍스트를 정의하고, data-bs-content 속성은 팝업 본문에 표시되는 텍스트를 정의합니다：

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="팝업 제목" data-bs-content="팝업 내에 있는 일부 내용">팝업 전환</button>

注意：팝업은 JavaScript를 통해 초기화되어야 작동합니다.

다음 코드는 문서 중 모든 팝업을 활성화합니다：

實例

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

親自試一試

팝업 정위치

기본적으로, 팝업은 요소의 우측에 나타납니다.

사용해 주세요 data-bs-placement 속성 설정 팝업이 요소 상단, 하단, 좌측 또는 우측에 위치하게 합니다：

實例

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>

親自試一試

注意：如果沒有足夠的空間，placement 屬性將不會按您的預期工作。例如：如果您在頁面頂部（無預留空間）使用 top placement 屬性，它將改為在元素下方或右侧（任何有空間的地方）顯示彈出框。

關閉彈出框

默認情況下，再次單擊元素時會關閉彈出窗口。但是，您可以使用 data-bs-trigger="focus" 屬性，設置該屬性可在元素外部單擊時關閉彈出窗口：

實例

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="单击文档中的任意位置可关闭此弹出窗口">點擊我</a>

親自試一試

懸停彈出框

提示：如果您希望在將鼠標指針移動到元素上時顯示彈出框，請使用為值 "hover" 的 data-bs-trigger 屬性：

實例

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="弹出框文本">在我上方懸停</a>

親自試一試