팝오버
iOS에서 볼 수 있는 것과 같은 부트스트랩 팝오버를 사이트의 모든 요소에 추가하기 위한 문서 및 예제입니다.
팝오버 플러그인을 사용할 때 알아야 할 사항:
- Popover는 위치 지정을 위해 타사 라이브러리 Popper.js 에 의존 합니다. 팝오버가 작동하려면 bootstrap.js 전에 popper.min.js를 포함하거나 Popper.js 가 포함된
bootstrap.bundle.min.js/bootstrap.bundle.js를 사용해야 합니다! - 팝오버에는 종속성으로 툴팁 플러그인 이 필요합니다 .
- 소스에서 JavaScript를 빌드하는 경우
util.js. - 팝오버는 성능상의 이유로 선택되어 있으므로 직접 초기화해야 합니다 .
- 길이가 0
title이고content값은 팝오버를 표시하지 않습니다. container: 'body'더 복잡한 구성 요소(예: 입력 그룹, 버튼 그룹 등)에서 렌더링 문제를 방지하려면 지정 합니다.- 숨겨진 요소에 대한 팝오버 트리거는 작동하지 않습니다.
.disabled또는 요소 에 대한 팝오버disabled는 래퍼 요소에서 트리거되어야 합니다.- 여러 줄을 가로질러 감싸는 앵커에서 트리거되면 팝오버가 앵커의 전체 너비 중앙에 배치됩니다. 이 동작을 방지 하려면
.text-nowrap에 사용하십시오.<a> - 팝오버는 해당 요소가 DOM에서 제거되기 전에 숨겨야 합니다.
몇 가지 예에서 팝오버가 작동하는 방식을 보려면 계속 읽으십시오.
페이지의 모든 팝오버를 초기화하는 한 가지 방법은 data-toggle속성별로 선택하는 것입니다.
$(function () {
$('[data-toggle="popover"]').popover()
})container팝오버를 방해하는 일부 스타일이 상위 요소에 있는 경우 팝오버의 HTML이 대신 해당 요소 내에 나타나도록 사용자 정의를 지정하고 싶을 것입니다.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>네 가지 옵션을 사용할 수 있습니다: 위쪽, 오른쪽, 아래쪽 및 왼쪽 정렬.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>focus사용자가 다음에 토글 요소와 다른 요소를 클릭할 때 팝오버를 해제 하려면 트리거를 사용하십시오 .
다음 클릭 시 닫기에 필요한 특정 마크업
적절한 크로스 브라우저 및 크로스 플랫폼 동작을 위해서는 <a>태그가 아닌 태그 를 사용해야 하며 속성 <button>도 포함해야 합니다.tabindex
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>$('.popover-dismiss').popover({
trigger: 'focus'
})속성이 있는 요소는 disabled대화형이 아니므로 사용자가 해당 요소를 가리키거나 클릭하여 팝오버(또는 도구 설명)를 트리거할 수 없습니다. 이 문제를 해결하려면 래퍼에서 팝오버를 트리거 <div>하거나 비활성화된 요소를 <span>재정의해야 합니다 .pointer-events
비활성화된 팝오버 트리거 의 경우 비활성화된 요소 를 클릭data-trigger="hover" 할 것으로 예상하지 않을 수 있으므로 팝오버가 사용자에게 즉각적인 시각적 피드백으로 나타나도록 할 수도 있습니다 .
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>JavaScript를 통해 팝오버 활성화:
$('#example').popover(options)옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-animation="".
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| 생기 | 부울 | 진실 | 팝오버에 CSS 페이드 전환 적용 |
| 컨테이너 | 문자열 | 요소 | 거짓 | 거짓 | 특정 요소에 팝오버를 추가합니다. 예: |
| 콘텐츠 | 문자열 | 요소 | 기능 | '' |
함수가 제공되면 |
| 지연 | 번호 | 물체 | 0 | 팝오버 표시 및 숨기기 지연(ms) - 수동 트리거 유형에는 적용되지 않습니다. 숫자가 제공되면 숨기기/표시 모두에 지연이 적용됩니다. 개체 구조는 다음과 같습니다. |
| HTML | 부울 | 거짓 | 팝오버에 HTML을 삽입합니다. false인 경우 jQuery의 text메서드를 사용하여 DOM에 콘텐츠를 삽입합니다. XSS 공격이 걱정된다면 텍스트를 사용하세요. |
| 놓기 | 문자열 | 기능 | '오른쪽' | 팝오버 위치 지정 방법 - 자동 | 상단 | 바닥 | 왼쪽 | 오른쪽. 가 지정되면 팝오버의 방향을 동적으로 변경합니다 위치를 결정하는 데 함수가 사용되면 첫 번째 인수로 팝오버 DOM 노드를 사용하고 두 번째 인수로 트리거 요소 DOM 노드를 사용하여 호출됩니다. 컨텍스트 는 |
| 선택자 | 문자열 | 거짓 | 거짓 | 선택기가 제공되면 팝오버 개체가 지정된 대상에 위임됩니다. 실제로 이것은 동적 HTML 콘텐츠에 팝오버를 추가하는 데 사용됩니다. 이것 과 유익한 예를 참조하십시오 . |
| 주형 | 끈 | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
팝오버를 생성할 때 사용할 기본 HTML입니다. 팝오버 팝오버
가장 바깥쪽 래퍼 요소에는 클래스가 있어야 합니다 |
| 제목 | 문자열 | 요소 | 기능 | '' |
함수가 제공되면 |
| 방아쇠 | 끈 | '딸깍 하는 소리' | 팝오버가 실행되는 방법 - 클릭 | 호버 | 초점 | 수동. 여러 트리거를 전달할 수 있습니다. 공백으로 구분하십시오. manual다른 트리거와 결합할 수 없습니다. |
| 오프셋 | 번호 | 끈 | 0 | 대상을 기준으로 한 팝오버의 오프셋입니다. 자세한 내용은 Popper.js의 오프셋 문서 를 참조하세요 . |
| 대체 게재위치 | 문자열 | 정렬 | '튀기다' | Popper가 대체에 사용할 위치를 지정할 수 있습니다. 자세한 내용은 Popper.js의 동작 문서 를 참조하세요. |
| 경계 | 문자열 | 요소 | '스크롤 부모' | 팝오버의 오버플로 제약 조건 경계입니다. 'viewport', 'window', 'scrollParent', 또는 HTMLElement 참조 값을 허용합니다 (JavaScript만 해당). 자세한 내용은 Popper.js의 preventOverflow 문서 를 참조하세요 . |
개별 팝오버의 데이터 속성
개별 팝오버에 대한 옵션은 위에서 설명한 대로 데이터 속성을 사용하여 대신 지정할 수 있습니다.
비동기식 메서드 및 전환
모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 종료되기 전에 호출자에게 반환됩니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.
요소 컬렉션에 대한 팝오버를 초기화합니다.
요소의 팝오버를 표시합니다. 팝오버가 실제로 표시 되기 전에(즉, shown.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다. 제목과 내용이 모두 길이가 0인 팝오버는 표시되지 않습니다.
$('#element').popover('show')요소의 팝오버를 숨깁니다. 팝오버가 실제로 숨겨 지기 전에(즉, hidden.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다.
$('#element').popover('hide')요소의 팝오버를 토글합니다. 팝오버가 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.popover또는 hidden.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다.
$('#element').popover('toggle')요소의 팝오버를 숨기고 파괴합니다. 위임을 사용하는 팝오버( 옵션 을 사용 하여selector 생성됨 )는 하위 트리거 요소에서 개별적으로 소멸될 수 없습니다.
$('#element').popover('dispose')요소의 팝오버에 표시할 수 있는 기능을 제공합니다. 팝오버는 기본적으로 활성화되어 있습니다.
$('#element').popover('enable')요소의 팝오버가 표시되는 기능을 제거합니다. 팝오버는 다시 활성화된 경우에만 표시될 수 있습니다.
$('#element').popover('disable')요소의 팝오버를 표시하거나 숨길 수 있는 기능을 토글합니다.
$('#element').popover('toggleEnabled')요소의 팝오버 위치를 업데이트합니다.
$('#element').popover('update')| 이벤트 유형 | 설명 |
|---|---|
| show.bs.popover | show이 이벤트는 인스턴스 메서드가 호출 되는 즉시 발생합니다 . |
| show.bs.popover | 이 이벤트는 팝오버가 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 기다림). |
| hide.bs.popover | hide이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 . |
| hidden.bs.popover | 이 이벤트는 팝오버가 사용자에게 숨겨지면 시작됩니다(CSS 전환이 완료될 때까지 기다림). |
| 삽입.bs.popover | 이 이벤트는 show.bs.popover팝오버 템플릿이 DOM에 추가되었을 때 이벤트 후에 시작됩니다. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})