목차
Popover 구문 (기본/위치) Popover 정의 Popover 닫기 - 아무곳이나 클릭하면 닫기 Popover 툴팁화 - mouseover시 열기, mouseleave시 닫기 JS PopOver 플러그인 JS PopOver 구문 - data-* 속성 JS PopOver 초기화 JS PopOver Option (옵션) JS PopOver Method (메서드) JS PopOver Event (이벤트) JS PopOver Design (디자인) - CSS 추가
※ BS3와 거의 동일. (단, 옵션 추가변경됨.)
Popover 구문 (기본/위치)
title=" 머리글 " data-toggle="popover" data-placement=" 위치 " data-content="내용"
<a href="#" title=" Homzzang.com " data-toggle="popover" data-placement=" top " data-content="홈페이지제작관리"title=" Homzzang.com " data-toggle="popover" data-placement=" bottom " data-content="홈페이지제작관리"title=" Homzzang.com " data-toggle="popover" data-placement=" left " data-content="홈페이지제작관리"title=" Homzzang.com " data-toggle="popover" data-placement=" right " data-content="홈페이지제작관리"
<a href="#" title=" Homzzang.com " data-toggle="popover" data-placement="auto left " data-content="홈페이지제작관리"
<script>
$(document).ready(function(){
$('[data-toggle=" popover"]').popover();
});
</script>
결과보기
※ 모든 popover은 해당 요소를 선택 후, jQuery popover() 함수로 초기화 필요. (위 하단 스크립튼)
※ 말풍선 위치는 data-placement 속성 이용해 변경 가능. (기본위치 : 오른쪽 )
※ data-placement 속성의 속성값을 "auto"와 함께 사용하면 브라우저가 위치를 결정 가능.
(예) 속성값이 "auto left"인 경우, 가능하면 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시.
Popover 정의
사용자가 요소를 클릭하면 나타나는 팝업 상자.
1.
마우스허버 시 나타나는 툴팁(Tooltip)과 유사하나,
툴팁(Tooltip)보다 훨씬 더 많은 내용을 추가 가능.
2.
플러그인 추가 방법
popover.js (+ tooltip.js ) 개별 플러그인 파일로 추가하거나,
bootstrap.js (또는 bootstrap.min.js ) 종합 플러그인 파일을 추가.
3.
기본적으로, 요소를 클릭하면 나타났다가 다시 요소 클릭하면 사라지나,
data-trigger="focus" 또는 data-trigger="hover" 이용해 쉽게 열고 닫을 수 있음.
Popover 닫기 - 아무곳이나 클릭하면 닫기
<a href="#" title="Homzzang.com " data-toggle="popover" data-trigger="focus" data-placement="top " data-content="홈페이지제작관리">홈짱닷컴</a>
결과보기
Popover 툴팁화 - mouseover시 열기, mouseleave시 닫기
<a href="#" title="Homzzang.com " data-toggle="popover" data-trigger="hover" data-placement="top " data-content="홈페이지제작관리">홈짱닷컴</a>
결과보기
JS PopOver
JS PopOver 플러그인
popover.js 플러그인은 tooltip.js 플러그인에 의존 관계에 있음. (즉, 둘 다 필요.)
개별: popover.js + tooltip.js
통합: bootstrap.js (또는, bootstrap.min.js)
JS PopOver 구문 - data-* 속성
<a href="#" data-toggle="popover" title="Homzzang.com" data-content="코딩강의" >홈짱닷컴</a>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover(); // 초기화.
});
</script>
JS PopOver 초기화
// data-toggle="popover" 속성 갖는 모든 요소 초기화.
$('[data-toggle="popover"]').popover();
// 특정요소 초기화
$('#myPopover').popover();
※ PopOver는 CSS 전용 플러그인이 아니므로 jQuery로 초기화 필요.
JS PopOver Option (옵션)
animation
팝오버를 열고 닫을 때 CSS 페이드 전환 효과를 추가할지 여부.
옵션값 유형: boolean (기본값: true)
true - 페이딩 효과 추가 O (기본값)
false - 페이딩 효과 추가 X
container
팝오버 추가할 요소 지정. (예 : container: 'body')
옵션값 유형: string | false (기본값: false)
string : 특정 요소를 나타내는 문자열.
false : 아무 요소도 지정 안함. (boolean의 false 의미) (기본값)
content
팝오버 본문 내부의 텍스트 지정. (기본값: "")
옵션값 유형: string
string : 본문에 입력할 텍스트 내용. "" 입력하고 아무 것도 안 적을 수 있음.
delay
팝오버를 열고 닫는 데 걸리는 시간 (밀리초) 지정.
옵션값 유형: number | object (기본값: 0)
열기 지연과 닫기 지연을 지정하려면 객체 구조를 사용. (예: 보이기 0.5초, 숨기기 0.1초)
(예) delay: {show : 500, hide : 100}
html
팝 오버에서 HTML 태그를 승인할지 여부를 지정.
옵션값 유형: boolean (기본값: false)
true - HTML 태그 허용 O
false - HTML 태그 허용 X
참고 : HTML은 title 속성에 (또는 title 옵션 사용해) 삽입 해야 함.
참고 : false (기본값) 설정 시, jQuery의 text() 메소드 사용. (XSS 공격에 안전)
placement
팝오버 위치 지정.
옵션값 유형: string (가능값: top | bottom | left | right | auto) (기본값: right)
"top" - 상단에 위치.
"bottom" - 하단에 위치.
"left" - 왼쪽에 위치.
"right " - 오른쪽에 위치. (기본값)
"auto " - 브라우저가 팝오버의 위치를 결정. 다른 속성값들과 함께 사용 가능.
(예제)
"auto left" : 가능한 경우 팝오버가 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시.
"auto bottom" : 가능한 경우 팝 오버가 맨 아래에 표시되고 그렇지 않으면 맨 위에 표시.
selector
지정 선택자에 팝오버 추가.
옵션값 종류: string | false (기본값: false)
string
false : 아무 선택자도 지정 안 함. (boolean의 false 의미.)
template
문자열 팝업을 만들 때 사용할 기본 HTML. 디자인 커스텀할 때 유용. 맨 하단 예제 참고.
.popover 클래스 : 팝오버 맨 외곽.
.popover-title 클래스 : 팝오버 제목.
.popover-content 클래스 : 팝오버 내용.
.arrow 클래스 : 팝오버 화살표.
title
팝 오버의 헤더 텍스트 지정.
옵션값 유형: string (기본값: "")
trigger
팝업이 트리거(=촉발)되는 방식 지정
옵션값 유형: string (가능값: click, hover, focus, manual) (기본값: click)
"click" - 클릭으로 팝오버 트리거 (기본값)
"hover" - 호버 (= 마우스오버) 시 팝오버 트리거
"focus" - 포커스 (= 요소 선택해 커서 갖을 때) 팝오버 트리거 (예 : 탭 또는 클릭).
"manual" - 팝오버를 수동으로 트리거
참고 : 여러 값을 전달하려면 공백으로 구분.
offset
target 기준으로 팝오버 오프셋 지정. BS4 추가.
옵션값 유형: number | string (기본값: 0)
fallbackPlacement BS4 추가.
옵션값 유형: string | "flip" 배열 (기본값: "flip")
boundary BS4 추가.
주의: viewport 옵션은 BS4에서 제거됨.
※ data-* 속성 방식이나 JS 통해 옵션 전달 가능.
JS PopOver Method (메서드)
.popover(options )
옵션으로 팝 오버를 활성화. 유효값은 위 옵션 참조.
.popover( "show")
팝오버 보이기.
.popover( "hide")
팝오버 숨기기.
.popover("toggle")
팝오버 토글.
.popover("dispose")
팝오버 숨기고 삭제. cf. BS3: .popover ("destroy")
.popover("enable")
팝오버 표시 가능 설정. (기본값) . BS4 추가.
.popover("disable") BS4 추가. 다시 활성화 된 경우에만 표시 가능.
.popover("toggleEnabled")
팝오버 (표시/숨김) 기능을 토글. BS4 추가.
.popover("update") BS4 추가.
JS PopOver Event (이벤트)
show.bs.popover
팝오버가 표시 되려고 할 때 발생.
shown.bs.popover
팝오버가 완전히 표시되면 (CSS 전환 완료 후) 발생.
hide.bs.popover
팝오버가 숨겨지려고 할 때 발생.
hidden.bs.popover
팝 오버가 완전히 숨겨지면 (CSS 전환 완료 후) 발생.
insert.bs.popover popover BS4 추가.
JS PopOver Design (디자인) - CSS 추가
<style>
/* Popover */
.popover {
border: 2px dotted red;
}
/* Popover Header */
.popover-title {
background-color: #73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
}
</style>
예제보기
※ .popover , .popover-title , .popover-content , .arrow 클래스에 대한 CSS 추가.
