팝오버

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에서 제거되기 전에 숨겨야 합니다.
• 팝오버는 shadow DOM 내부의 요소 덕분에 트리거될 수 있습니다.

몇 가지 예에서 팝오버가 작동하는 방식을 보려면 계속 읽으십시오.

예: 모든 곳에서 팝오버 활성화

페이지의 모든 팝오버를 초기화하는 한 가지 방법은 data-toggle속성별로 선택하는 것입니다.

$(function () {
  $('[data-toggle="popover"]').popover()
})

예: container옵션 사용

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 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)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-animation="".

행동 양식

$().popover(options)

요소 컬렉션에 대한 팝오버를 초기화합니다.

.popover('show')

요소의 팝오버를 표시합니다. 팝오버가 실제로 표시 되기 전에(즉, shown.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다. 제목과 내용이 모두 길이가 0인 팝오버는 표시되지 않습니다.

$('#element').popover('show')

.popover('hide')

요소의 팝오버를 숨깁니다. 팝오버가 실제로 숨겨 지기 전에(즉, hidden.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다.

$('#element').popover('hide')

.popover('toggle')

요소의 팝오버를 토글합니다. 팝오버가 실제로 표시되거나 숨겨 지기 전에(즉, shown.bs.popover또는 hidden.bs.popover이벤트가 발생하기 전에) 호출자에게 반환합니다. 이것은 팝오버의 "수동" 트리거로 간주됩니다.

$('#element').popover('toggle')

.popover('dispose')

요소의 팝오버를 숨기고 파괴합니다. 위임을 사용하는 팝오버( 옵션 을 사용 하여selector 생성됨 )는 하위 트리거 요소에서 개별적으로 소멸될 수 없습니다.

$('#element').popover('dispose')

.popover('enable')

요소의 팝오버에 표시할 수 있는 기능을 제공합니다. 팝오버는 기본적으로 활성화되어 있습니다.

$('#element').popover('enable')

.popover('disable')

요소의 팝오버가 표시되는 기능을 제거합니다. 팝오버는 다시 활성화된 경우에만 표시될 수 있습니다.

$('#element').popover('disable')

.popover('toggleEnabled')

요소의 팝오버를 표시하거나 숨길 수 있는 기능을 토글합니다.

$('#element').popover('toggleEnabled')

.popover('update')

요소의 팝오버 위치를 업데이트합니다.

$('#element').popover('update')

이벤트

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})