• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] BS3 - Popover (BS팝오버) ★ - 클릭형말풍선

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 추가.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
찾아주셔서 감사합니다. Since 2012