bootstrap 부트스트랩 popover, tooltip 기능 구현하기
페이지 정보
본문
<script src="/res/bootstrap-5.0.2-dist/js/bootstrap.bundle.js"></script>
<div style="padding:500px;">
<button type="button" class="btn btn-secondary .example-popover" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<br /><br />
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<br /><br />
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<br /><br />
<button type="button" class="btn btn-secondary .example-popover" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</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>
- 다음글부트스트랩으로 상단 메뉴 만들기 23.03.16
댓글목록
등록된 댓글이 없습니다.