Popovers

Tổng quan

Những điều cần biết khi sử dụng plugin popover:

• Popover dựa vào thư viện bên thứ ba Popper để định vị. Bạn phải bao gồm popper.min.js trước đó bootstrap.jshoặc sử dụng một trong bootstrap.bundle.min.jsđó có Popper.
• Popover yêu cầu plugin popover như một phần phụ thuộc.
• Cửa sổ bật lên được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng .
• Độ dài bằng 0 titlevà contentcác giá trị sẽ không bao giờ hiển thị cửa sổ bật lên.
• Chỉ định container: 'body'để tránh các sự cố hiển thị trong các thành phần phức tạp hơn (như nhóm đầu vào, nhóm nút của chúng tôi, v.v.).
• Kích hoạt cửa sổ bật lên trên các phần tử ẩn sẽ không hoạt động.
• Cửa sổ bật lên cho .disabledhoặc disabledcác phần tử phải được kích hoạt trên một phần tử trình bao bọc.
• Khi được kích hoạt từ các neo bao quanh nhiều dòng, các cửa sổ bật lên sẽ được căn giữa giữa chiều rộng tổng thể của các neo. Sử dụng .text-nowraptrên <a>s của bạn để tránh hành vi này.
• Các cửa sổ bật lên phải được ẩn trước khi các phần tử tương ứng của chúng bị xóa khỏi DOM.
• Popover có thể được kích hoạt nhờ vào một phần tử bên trong Shadow DOM.

Hãy tiếp tục đọc để biết cách hoạt động của các cửa sổ bật lên với một số ví dụ.

Các ví dụ

Bật cửa sổ bật lên

Như đã đề cập ở trên, bạn phải khởi tạo các cửa sổ bật lên trước khi chúng có thể được sử dụng. Một cách để khởi tạo tất cả các cửa sổ bật lên trên một trang là chọn chúng theo data-bs-togglethuộc tính của chúng, như sau:

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

Bản thử trực tiếp

Chúng tôi sử dụng JavaScript tương tự như đoạn mã ở trên để hiển thị cửa sổ bật lên trực tiếp sau đây. Tiêu đề được đặt qua data-bs-titlevà nội dung nội dung được đặt qua 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>

Bốn hướng

Bốn tùy chọn có sẵn: trên cùng, bên phải, dưới cùng và bên trái. Chỉ đường được phản chiếu khi sử dụng Bootstrap trong RTL. Đặt data-bs-placementđể thay đổi hướng.

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

Phong tụccontainer

Khi bạn có một số kiểu trên phần tử mẹ cản trở cửa sổ bật lên, bạn sẽ muốn chỉ định một tùy chỉnh containerđể HTML của cửa sổ bật lên xuất hiện bên trong phần tử đó. Điều này phổ biến trong các bảng đáp ứng, nhóm đầu vào và những thứ tương tự.

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

Một tình huống khác mà bạn sẽ muốn đặt một tùy chỉnh rõ ràng containerlà các cửa sổ bật lên bên trong hộp thoại phương thức , để đảm bảo rằng bản thân cửa sổ bật lên đó được thêm vào phương thức. Điều này đặc biệt quan trọng đối với các cửa sổ bật lên có chứa các yếu tố tương tác - hộp thoại phương thức sẽ bẫy tiêu điểm, vì vậy trừ khi cửa sổ bật lên là một phần tử con của phương thức, người dùng sẽ không thể tập trung hoặc kích hoạt các phần tử tương tác này.

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

Cửa sổ bật lên tùy chỉnh

Bạn có thể tùy chỉnh giao diện của các cửa sổ bật lên bằng cách sử dụng các biến CSS . Chúng tôi đặt một lớp tùy chỉnh với data-bs-custom-class="custom-popover"phạm vi giao diện tùy chỉnh của chúng tôi và sử dụng nó để ghi đè một số biến CSS cục bộ.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --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>

Bỏ qua trong lần nhấp tiếp theo

Sử dụng trình focuskích hoạt để loại bỏ các cửa sổ bật lên trong lần nhấp tiếp theo của người dùng vào một phần tử khác với phần tử bật tắt.

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

Các phần tử bị vô hiệu hóa

Các phần tử có disabledthuộc tính không tương tác, có nghĩa là người dùng không thể di chuột hoặc nhấp vào chúng để kích hoạt cửa sổ bật lên (hoặc chú giải công cụ). Để giải quyết vấn đề này, bạn sẽ muốn kích hoạt cửa sổ bật lên từ trình bao bọc <div>hoặc <span>lý tưởng là có thể lấy tiêu điểm bằng bàn phím tabindex="0".

Đối với trình kích hoạt cửa sổ bật lên bị tắt, bạn cũng có thể muốn data-bs-trigger="hover focus"cửa sổ bật lên xuất hiện dưới dạng phản hồi trực quan ngay lập tức cho người dùng của bạn vì họ có thể không mong đợi nhấp vào phần tử bị vô hiệu hóa.

<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

Biến

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, các cửa sổ bật lên hiện sử dụng các biến CSS cục bộ trên .popoverđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$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);
  

Biến Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

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

Cách sử dụng

Bật cửa sổ bật lên qua JavaScript:

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

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào data-bs-, như trong data-bs-animation="{value}". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ “ camelCase ” thành “ kebab-case ” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, sử dụng data-bs-custom-class="beautifier"thay vì data-bs-customClass="beautifier".

Kể từ Bootstrap 5.2.0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệmdata-bs-config có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có data-bs-config='{"delay":0, "title":123}'và data-bs-title="456"các thuộc tính, titlegiá trị cuối cùng sẽ là 456và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cho trên data-bs-config. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như data-bs-delay='{"show":0,"hide":150}'.

Sử dụng chức năng vớipopperConfig

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

Phương pháp

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

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

Sự kiện

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