7-3. 팝오버
■ 팝오버
팝오버(popover) 요소는 툴팁과 유사합니다. 사용자가 요소를 클릭하면 나타나는 팝업 상자인데 팝오버가 툴팁 보다 훨씬 더 많은
콘텐츠를 포함할 수 있습니다.
팝오버를 만들려면 요소에 data-bs-toggle="popover" 속성을 추가합니다. 툴팁 내부에 표시될 텍스트를 지정하려면 title 속성을 사용합니다.
그리고 data-bs-content 속성을 사용하여 팝오버 본문에 표시될 텍스트를 지정합니다.
<div class="container mt-3">
<h3>팝오버(popover)</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="popover"
title="팝오버 제목" data-bs-content="팝오버 내용입니다.">
버튼 클릭!
</button>
</div>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
ex7-3.html의 실행 결과
