https://www.w3schools.com/bootstrap/bootstrap_popover.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp
http://bootstrapk.com/javascript/#popovers
BS3
Popover 구문 (생성법 + 위치지정)
<a href="#" title="제목" data-toggle="popover" data-placement="위치" data-content="내용">노출글</a>
<a href="#" title="Homzzang.com" data-toggle="popover" data-placement="top" data-content="홈페이지제작관리">홈짱닷컴</a>
<a href="#" title="Homzzang.com" data-toggle="popover" data-placement="bottom" data-content="홈페이지제작관리">홈짱닷컴</a>
<a href="#" title="Homzzang.com" data-toggle="popover" data-placement="left" data-content="홈페이지제작관리">홈짱닷컴</a>
<a href="#" title="Homzzang.com" data-toggle="popover" data-placement="right" data-content="홈페이지제작관리">홈짱닷컴</a>
<a href="#" title="Homzzang.com" data-toggle="popover" data-placement="auto left" data-content="홈페이지제작관리">홈짱닷컴</a>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
결과보기
※ 모든 popover은 해당 요소를 선택 후, jQuery popover() 함수로 초기화 필요. (위 하단 스크립튼)
※ 말풍선 위치는 data-placement 속성 이용해 변경 가능. (기본위치 : 오른쪽)
※ data-placement 속성의 속성값을 "auto"와 함께 사용하면 브라우저가 위치를 결정 가능.
(예) 속성값이 "auto left"인 경우, 가능하면 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시.
Popover 정의
사용자가 요소를 클릭하면 나타나는 팝업 상자.
1.
마우스 허버 시 나타나는 툴팁(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
PopOver 플러그인
popover.js 플러그인은 tooltip.js 플러그인에 의존 관계에 있음. (즉, 둘 다 필요.)
개별: popover.js + tooltip.js
통합: bootstrap.js (또는, bootstrap.min.js)
PopOver 방법1 - data-* 속성 이용
<a href="#" data-toggle="popover" title="Homzzang.com" data-content="코딩강의">홈짱닷컴</a>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover(); // 초기화.
});
</script>
PopOver JS 초기화 방식
// data-toggle="popover" 속성 갖는 모든 요소 초기화.
$('[data-toggle="popover"]').popover();
// 특정요소 초기화
$('#myPopover').popover();
※ PopOver는 CSS 전용 플러그인이 아니므로 jQuery로 초기화 필요.
PopOver Option (옵션)
animation
팝오버를 열고 닫을 때 CSS 페이드 전환 효과를 추가할지 여부.
옵션값 유형: boolean (기본값: true)
true - 페이딩 효과 추가 O (기본값)
false - 페이딩 효과 추가 X
container
팝오버 추가할 요소 지정. 예 : container: 'body'
옵션값 유형: string | false
string: 특정 요소를 나타내는 문자열.
false : 아무 요소도 지정 안함. (boolean의 false 의미)
content
팝오버 본문 내부의 텍스트 지정. (기본값: "")
옵션값 유형: string
string : 본문에 입력할 텍스트 내용. "" 입력하고 아무 것도 안 적을 수 있음.
delay
팝오버를 열고 닫는 데 걸리는 시간 (밀리초) 지정. (기본값: 0)
옵션값 유형: number | object
열기 지연과 닫기 지연을 지정하려면 객체 구조를 사용. (예: 보이기 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)
"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" - 팝오버를 수동으로 트리거
참고 : 여러 값을 전달하려면 공백으로 구분.
viewport
이 요소의 범위 내에 팝오버 유지.
옵션값 유형: string | object ※기본값: {selector: "body", padding: 0}
string : 요소를 나타내는 문자열. (예) viewport: '#viewport'
object : 요소와 padding 등으로 구성되는 객체 (예) viewport: {selector : '#viewport', padding: 0}
※ data-* 속성 방식이나 JS 통해 옵션 전달 가능.
PopOver Method (메서드)
.popover(options)
옵션으로 팝 오버를 활성화. 유효값은 위 옵션 참조.
.popover( "show")
팝오버 보이기.
.popover( "hide")
팝오버 숨기기.
.popover("toggle")
팝오버 토글.
.popover ("destroy")
팝 오버를 숨기고 삭제
PopOver Event (이벤트)
show.bs.popover
팝오버가 표시 되려고 할 때 발생.
shown.bs.popover
팝오버가 완전히 표시되면 (CSS 전환 완료 후) 발생.
hide.bs.popover
팝오버가 숨겨지려고 할 때 발생.
hidden.bs.popover
팝 오버가 완전히 숨겨지면 (CSS 전환 완료 후) 발생.
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 추가.
