Popovers

Tổng quan

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

• Popover dựa vào Popper thư viện của bên thứ 3 để định vị. Bạn phải bao gồm popper.min.js trước bootstrap.js hoặc sử dụng bootstrap.bundle.min.js/ bootstrap.bundle.jscó chứa Popper để popover hoạt động!
• Các cửa sổ bật lên yêu cầu plugin chú giải công cụ 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ụ.

Ví dụ: Bật cửa sổ bật lên ở mọi nơi

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:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Ví dụ: Sử dụng containertùy chọn

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ử đó.

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

Thí dụ

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" 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, bên dưới và căn trái. Chỉ đường được phản chiếu khi sử dụng Bootstrap trong RTL.

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

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" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.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>

Sass

Biến

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Cách sử dụng

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

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

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-bs-, như trong data-bs-animation="". Đả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ụ, thay vì sử dụng data-bs-customClass="beautifier", hãy sử dụng data-bs-custom-class="beautifier".

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

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

Phương pháp

buổi bieu diễn

Hiển thị cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị (tức là trước khi shown.bs.popoversự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên. Các cửa sổ bật lên có tiêu đề và nội dung đều có độ dài bằng 0 sẽ không bao giờ được hiển thị.

myPopover.show()

ẩn giấu

Ẩn cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự bị ẩn (tức là trước khi hidden.bs.popoversự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên.

myPopover.hide()

chuyển đổi

Chuyển đổi cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.popoverhoặc hidden.bs.popoversự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên.

myPopover.toggle()

vứt bỏ

Ẩn và phá hủy cửa sổ bật lên của phần tử (Xóa dữ liệu được lưu trữ trên phần tử DOM). Các cửa sổ bật lên sử dụng ủy quyền (được tạo bằng cách sử dụng tùy selectorchọn ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con cháu.

myPopover.dispose()

cho phép

Cung cấp khả năng hiển thị cửa sổ bật lên của một phần tử. Các cửa sổ bật lên được bật theo mặc định.

myPopover.enable()

vô hiệu hóa

Loại bỏ khả năng hiển thị cửa sổ bật lên của một phần tử. Cửa sổ bật lên sẽ chỉ có thể được hiển thị nếu nó được bật lại.

myPopover.disable()

toggleEnabled

Chuyển đổi khả năng hiển thị hoặc ẩn cửa sổ bật lên của một phần tử.

myPopover.toggleEnabled()

cập nhật

Cập nhật vị trí của cửa sổ bật lên của một phần tử.

myPopover.update()

getInstance

Phương thức tĩnh cho phép bạn nhận được phiên bản popover được liên kết với một phần tử DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Phương thức static cho phép bạn lấy phiên bản popover được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Sự kiện

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