예제1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_Popover.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container">
<h1>Popover 테스트</h1>
<button type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
<script>
// data-bs-toggle 속성의 value 가 popover 인 모든 요소의 참조값을 배열에 담아오기
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
// popover 가 동작하기 위한 초기화 작업 하기
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>
Popover 테스트 페이지 이다.
해당 페이지에서 Click to toggle popover 버튼을 셋중 아무거나를 눌러도 오른쪽에 data-bs-content 에 작성한 내용이 나타난다.
예제2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_Popover2.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container" style="padding: 200px">
<h1>Popover 테스트</h1>
<button id="one" type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button id="two" type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button id="three" type="button" class="btn btn-lg btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
<script>
// 첫번째 버튼의 popover 초기화 하기
const one = document.querySelector("#one");
new bootstrap.Popover(one, {placement:"top"});
const two = document.querySelector("#two");
new bootstrap.Popover(two, {placement:"bottom"});
new bootstrap.Popover(document.querySelector("#three"), {
placement:"right",
trigger:"hover focus"
});
</script>
</body>
</html>
위 버튼은 왼쪽에 있는 버튼은 팝업이 위로 나타나게
중앙에 있는 버튼은 팝업이 아래로 나타나게
오른쪽에 있는 버튼은 팝업이 오른쪽으로 나타나게 설정한 것이다.
특이사항으로 맨 오른쪽에 있는 버튼은
trigger:"hover focus"
속성을 부여했기때문에 hover, focus 이벤트가 일어나면 팝업이 표시된다.
'CSS' 카테고리의 다른 글
| Transition (2) (0) | 2023.07.11 |
|---|---|
| Transition (1) (1) | 2023.07.11 |
| Bootstrap Dropdown 디자인 및 동작 (0) | 2023.06.12 |
| Bootstrap Alert 디자인 및 동작 (0) | 2023.06.09 |
| Bootstrap Form 디자인(2) (0) | 2023.06.08 |
