안녕하세요. 명월입니다.
이 글은 Bootstrap에서 팝오버(popover)에 대한 글입니다.
예전에 제가 Bootstrap의 툴팁(tooltip)에 대해 소개한 적이 있습니다.
팝오버는 이 툴팁이랑 매우 비슷한 컨트롤인데, 툴팁이랑 다이얼로그를 합쳐놓은 컨트롤이라고 생각하면 됩니다.
툴팁은 간단한 설명이나 주석등을 사용하기 위한 컨트롤이면 팝오버는 다이얼로그처럼 알림 사항등에 툴팁처럼 화살표(?)가 있는 다이얼 로그라고 생각하면 됩니다.
링크 - https://getbootstrap.com/docs/3.4/javascript/#popovers
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 버튼을 구성할 영역 설정-->
<div style="margin:10px;">
<!-- 태그로 팝오버을 사용하는 방법이다 -->
<!-- data-toggle에 popover 옵선을 설정한다. data-placement은 팝오버의 방향으로 top, bottom, left, right가 있다.-->
<!-- title에는 팝오버의 내용을 넣는다. -->
<button id="popover_btn" data-toggle="popover" title="제목" data-content="예제입니다." data-placement="bottom">버튼</button>
<script>
// 팝오버을 실행하기 위해서 script에 popover함수를 실행해야 한다.
$(function(){
$('#popover_btn').popover({
// fade 효과 사용 여부
animation: true,
// 팝오버을 나타낼 특정 요소
container: false,
// 지연 설정
delay: {show:500, hide:100},
// 템필릿
html: false,
// html false 경우 지정할 요소 selector
selector: false,
// html true일 경우 사용되는 popover 템플릿
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
// 팝오버 트리거(반응) 이벤트
trigger: 'hover focus',
viewport: { selector: 'body', padding: 0 },
// 방향 (설정하면 요소의 data-placement 설정의 무효된다.)
//placement: 'bottom',
// 제목 (설정하면 요소의 title 설정의 무효된다.)
//title: '',
// 컨텐츠 값 (설정하면 요소의 data-content값은 무효된다.)
// content: '',
//sanitize: true,
//sanitizeFn: null,
//whiteList: ''
});
});
</script>
</div>
</body>
</html>
막상 정리하고 보니깐 tooltip이랑 95%이상 비슷하네요... 다른 점이라고는 data-content가 생긴거 뿐이네요...
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| animation | boolean | true | 팝오버에 CSS fade 전환 적용 |
| container | string | false | false | 팝오버을 특정 요소에 추가합니다. 예 : container : "#id". 특정 요소에 팝오버을 배치할 수 있습니다. |
| delay | number | object | 0 | 팝오버의 표시와 숨기기를 나타내는 지연 설정을 할 수 있습니다. delay: { "show": 500, "hide": 100 } |
| html | boolean | false | 팝오버에 html의 사용여부. |
| placement | string | function | 'top' | 방향 설정 |
| selector | string | false | html이 false로 지정되면 selector로 popover의 구조를 설정할 수 있음. |
| template | string | 기본 | html이 true로 지정되면 사용. 팝오버을 만들 때 사용할 기본 HTML입니다. 팝오버 제목이 .popover-title에 삽입됩니다. 컨텐츠 내용은 .popover-content에 들어갑니다. .arrow는 팝오버의 화살표가됩니다. 가장 바깥 쪽 래퍼 요소에는 .popover 클래스가 있어야합니다. |
| title | string | function | '' | 팝오버 내용 |
| trigger | string | 'hover focus | 팝오버이 트리거되는 옵션 - click | hover | focus | manual. |
| viewport | string | object | function | { selector: 'body', padding: 0 } | 이 요소의 범위 내에서 팝오버을 유지합니다. 예 : 뷰포트 : '#viewport'또는 { "selector": "#viewport", "padding": 0} |
| sanitize | boolean | true | '템플릿'을 활성화하면 '콘텐츠'및 '제목'옵션이 삭제됩니다.(여기는 잘 모르겠네요..) |
| whiteList | object | ? | Bootstrap에서 사용되는 객체라는 데... 이것도 잘 모르겠네요. |
| sanitizeFn | null | function | null | sanitize가 true되면 실행되는 함수입니다. |
팝오버는 메소드와 이벤트도 있습니다. 이 메소드와 이벤트는 툴팁이랑 똑같습니다.
메소드는 팝오버를 제어하는 함수이고, 이벤트는 팝오버가 표시되거나 제거될 때 호출되는 함수입니다.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
/* 팝오버은 기본적으로 position이 absolute이기 때문에 초기화로 변형한다. */
#popover_area .popover {
position: initial!important;
}
</style>
<!-- 버튼을 구성할 영역 설정-->
<div style="margin:10px;">
<!-- 버튼을 누르면 팝오버이 나온다. -->
<button id="popover_btn">버튼</button>
<!-- 팝오버을 표시할 영역. -->
<div id="popover_area" style="border:1px solid;height:100px;">
</div>
<script>
$(function(){
$('#popover_btn').popover({
// fade 효과 설정
animation: true,
// 팝오버을 표시할 컨테이너 설정
container: "#popover_area",
// 팝오버 표시 틸레이
delay: {show:50, hide:10},
// template 사용한다.
html: true,
// 팝오버 template 제목은 popover-title, 내용은 popover-content에 들어간다.
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
// 팝오버 제목
title: '팝 오버',
// 팝오버 내용
content: '내용',
// 팝오버 이벤트는 수동.
trigger: 'manual'
});
// 버튼 클릭 이벤트
$('#popover_btn').on("click", function(){
// toggle 함수는 팝오버가 show상태면 hide로 hide면 show를 실행한다.
// 함수의 종류는 show, hide, toggle있다.
$('#popover_btn').popover('toggle');
// destroy 함수도 존재하는데 이는 popover를 해제하는 함수이다.
});
// 팝오버 이벤트로 팝오버이 표시 되기 전의 이벤트이다.
$('#popover_btn').on('show.bs.popover', function () {
// 첫번째로 실행되는 이벤트
});
// 팝오버 이벤트로 팝오버이 표시 된 후의 이벤트이다.
$('#popover_btn').on('shown.bs.popover', function () {
// 세번째로 실행되는 이벤트
});
// 팝오버 이벤트로 팝오버이 비표시 되기 전의 이벤트이다.
$('#popover_btn').on('hide.bs.popover', function () {
// 네번째로 실행되는 이벤트
});
// 팝오버 이벤트로 팝오버이 비표시 된 후의 이벤트이다.
$('#popover_btn').on('hidden.bs.popover', function () {
// 다섯번째로 실행되는 이벤트
});
// 팝오버 이벤트로 팝오버이 template이 컨테이너에 들어간 후의 이벤트이다.
$('#popover_btn').on('inserted.bs.popover', function () {
// 두번째로 실행되는 이벤트
});
});
</script>
</div>
</body>
</html>
여기까지 Bootstrap에서 팝오버(popover)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 요소 고정(Affix) (0) | 2020.03.04 |
|---|---|
| [Bootstrap] 이미지 슬라이딩 컨트롤(carousel) (0) | 2020.03.03 |
| [Bootstrap] 툴팁(tooltip) (0) | 2020.02.29 |
| [Bootstrap] 탭 (Tab) (0) | 2020.02.28 |
| [Bootstrap] Panel과 Thumbnails, Card (0) | 2020.02.27 |
| [Bootstrap] 페이징(Paging)와 페이저(pager) (0) | 2020.02.26 |
| [Bootstrap] 드롭 다운(Dropdown) (0) | 2020.02.24 |
| [Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법 (0) | 2019.12.01 |