팝오버

개요

팝오버 플러그인을 사용할 때 알아두어야 할 점:

• 팝오버는 서드파티 라이브러리인 Popper에 의존하고 있습니다. bootstrap.js 앞에 popper.min.js를 사용하거나, Popper가 포함되어 있는 bootstrap.bundle.min.js를 사용해야 합니다.
• 팝오버는, 의존관계로 popover 플러그인이 필요합니다.
• 팝오버는 퍼포먼스를 위해 opt-in 되어 있기 때문에, 스스로 초기화를 해야 합니다.
• 길이가 0인 title과 content 값은 팝오버를 표시하지 않습니다.
• 더 복잡한 컴포넌트(input group, button groups 등)의 렌더링 문제를 피하기 위해 container: 'body'를 지정해 주십시오.
• 숨겨진 요소에서 팝오버를 트리거 해도 작동하지 않습니다.
• .disabled 또는 disabled 요소의 팝오버는 그 위(바깥) 요소에서 트리거 해야 합니다.
• 여러 라인에 걸쳐 있는 앵커로부터 트리거 된 경우, 팝오버는 앵커의 전체 폭을 중심으로 표시됩니다. 이 동작을 피하기 위해서는 <a>에 .text-nowrap을 사용해 주십시오.
• 팝오버는 대응 요소가 DOM에서 삭제되기 전에 숨겨야 합니다.
• 팝오버는 shadow DOM 내의 요소 덕분에 트리거할 수 있습니다.

팝오버가 어떤 기능을 하는지 몇 가지 예를 들어 보겠습니다.

예시

팝오버 활성화

위에서 설명했듯이 팝오버를 사용하려면 사용하기 전에 팝오버를 초기화해주어야 합니다. 페이지 상의 모든 팝오버를 초기화하는 방법 중 하나는 아래처럼 data-bs-toggle 속성으로 선택하는 것입니다:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

라이브 데모

위의 스니펫과 유사한 JavaScript를 사용하여 다음과 같은 라이브 팝오버를 렌더링합니다. 제목은 data-bs-title을 통해 설정하고 본문 콘텐츠는 data-bs-content를 통해 설정합니다.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

사방위

4가지 옵션이 있습니다: top, right, bottom, left. RTL에서 Bootstrap을 사용하는 경우 방향은 반대가 됩니다. data-bs-placement 로 방향을 변경할 수 있습니다.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

사용자 지정 container

부모 요소에 팝오버를 방해하는 일부 스타일이 있는 경우 사용자 정의 container를 지정하여 해당 요소 내에 팝오버의 HTML이 대신 표시되도록 할 수 있습니다. 이는 반응형 표, 입력 그룹 등에서 흔히 사용됩니다.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

명시적인 사용자 정의 container를 설정해야 하는 또 다른 상황은 모달 대화 상자 내부의 팝업으로, 팝업 자체가 모달에 추가되도록 하는 것입니다. 이는 대화형 요소가 포함된 팝업의 경우 특히 중요합니다. 모달 대화 상자는 포커스를 가두기 때문에 팝업이 모달의 하위 요소가 아니면 사용자가 이러한 대화형 요소에 초점을 맞추거나 활성화할 수 없습니다.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

사용자 지정 팝오버

CSS 변수를 사용하여 팝오버의 모양을 사용자 정의할 수 있습니다. data-bs-custom-class="custom-popover"로 사용자 정의 클래스를 설정하여 사용자 정의 모양의 범위를 지정하고 이를 사용하여 일부 로컬 CSS 변수를 재정의합니다.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bd-violet-bg);
  --bs-popover-header-bg: var(--bd-violet-bg);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

다음 클릭으로 닫기

사용자가 다음 토글 요소 이외의 요소를 클릭했을 때 팝오버를 닫으려면 focus 트리거를 사용합니다.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

비활성화 요소

disabled 속성을 갖는 요소는 인터랙티브하지 않습니다. 즉, 사용자가 팝오버(또는 툴팁)를 일으키기 위해서 호버하거나 클릭할 수 없습니다. 차선책으로 감싼 <div> 및 <span>에서 팝오버를 트리거 되길 원하지만, tabindex="0"을 사용해 키보드 포커스가 가능하도록 이상적으로 만듭니다.

무효화된 팝오버를 트리거 하기 위해서는 data-bs-trigger="hover focus"라고 하면 사용자는 무효가 된 요소를 click 할 것을 기대하지 않기 때문에 팝오버가 바로 시각적으로 표시되게 됩니다.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

변수

Bootstrap의 진화하는 CSS 변수 접근 방식의 일환으로, 이제 팝오버는 .popover에서 로컬 CSS 변수를 사용하여 실시간 사용자 정의 기능을 향상시킵니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-border-radius: #{$popover-border-radius};
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
--#{$prefix}popover-body-color: #{$popover-body-color};
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

Sass 변수

$popover-font-size:                 $font-size-sm;
$popover-bg:                        var(--#{$prefix}body-bg);
$popover-max-width:                 276px;
$popover-border-width:              var(--#{$prefix}border-width);
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             var(--#{$prefix}border-radius-lg);
$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list
$popover-box-shadow:                var(--#{$prefix}box-shadow);

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 var(--#{$prefix}secondary-bg);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                var(--#{$prefix}body-color);
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

사용 방법

JavaScript로 팝오버를 유효화합니다:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

옵션

옵션은 데이터 속성이나 JavaScript를 통해 전달할 수 있으므로 data-bs-에 옵션 이름을 추가할 수 있습니다(예: data-bs-animation="{value}"). 데이터 속성을 통해 옵션을 전달할 때 옵션 이름의 대/소문자 유형을 ‘camelCase‘에서 ‘kebab-case‘로 변경해야 합니다. 예를 들어 data-bs-custom-class="beautifier" 대신 data-bs-customClass="beautifier"를 사용합니다.

Bootstrap 5.2.0부터 모든 컴포넌트는 간단한 컴포넌트 구성을 JSON 문자열로 저장할 수 있는 experimental 예약 데이터 속성 data-bs-config를 지원합니다. 요소에 data-bs-config='{"delay":0,"title":123}' 및 data-bs-title="456" 속성이 있는 경우 최종 title 값은 456이 되며 별도의 데이터 속성이 data-bs-config에 지정된 값을 재정의합니다. 또한 기존 데이터 속성에는 data-bs-delay='{"show":0,"hide":150}'와 같은 JSON 값을 저장할 수 있습니다.

최종 구성 개체는 data-bs-config, data-bs-, js object의 병합된 결과로, 주어진 최신 key-value가 다른 key-value를 재정의합니다.

popperConfig으로 기능 사용하기

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

메소드

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
popover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

이벤트

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})