Source

Popovers

Tài liệu và ví dụ để thêm các cửa sổ bật lên Bootstrap, như các cửa sổ bật lên được tìm thấy trong iOS, vào bất kỳ phần tử nào trên trang web của bạn.

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ứ 3 Popper.js để đị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.js để cửa sổ bật lên 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.
  • Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầuutil.js .
  • 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.

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

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-togglethuộc tính của chúng:

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

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Thí dụ

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

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.

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

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.

Đánh dấu cụ thể cần thiết để loại bỏ khi nhấp chuột tiếp theo

Để có hành vi trên nhiều trình duyệt và nền tảng phù hợp, bạn phải sử dụng thẻ <a>, không phải<button> thẻ và bạn cũng phải bao gồm một tabindexthuộc tính.

Bỏ qua cửa sổ bật lên 
<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'
})

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 đề, 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>ghi đè lên pointer-eventsphần tử bị vô hiệu hóa.

Đố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-trigger="hover"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" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Cách sử dụng

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

$('#example').popover(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-, như trong data-animation="".

Tên Loại hình Mặc định Sự mô tả
hoạt hình boolean thật Áp dụng chuyển đổi mờ dần CSS cho cửa sổ bật lên
thùng đựng hàng chuỗi | phần tử | sai sai

Thêm cửa sổ bật lên cho một phần tử cụ thể. container: 'body'Ví dụ :. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị cửa sổ bật lên trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn cửa sổ bật lên trôi ra khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ.
Nội dung chuỗi | phần tử | hàm số ''

Giá trị nội dung mặc định nếu data-contentthuộc tính không có.

Nếu một hàm được cung cấp, nó sẽ được gọi với thistập tham chiếu của nó tới phần tử mà cửa sổ bật lên được gắn vào.
sự chậm trễ số | sự vật 0

Độ trễ hiển thị và ẩn cửa sổ bật lên (mili giây) - không áp dụng cho loại kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện

Cấu trúc đối tượng là:delay: { "show": 500, "hide": 100 }
html boolean sai Chèn HTML vào cửa sổ bật lên. Nếu sai, phương thức của jQuery textsẽ được sử dụng để chèn nội dung vào DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS.
vị trí chuỗi | hàm số 'bên phải'

Cách định vị cửa sổ bật lên - tự động | đầu trang | đáy | trái | bên phải.
Khi autođược chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên.

Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM popover làm đối số đầu tiên và nút DOM phần tử kích hoạt là nút thứ hai của nó. Bối thiscảnh được đặt thành phiên bản popover.
bộ chọn chuỗi | sai sai Nếu một bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu được chỉ định. Trên thực tế, điều này được sử dụng để cho phép nội dung HTML động có thêm cửa sổ bật lên. Xem điều này và một ví dụ thông tin .
mẫu sợi dây '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML cơ sở để sử dụng khi tạo cửa sổ bật lên.

Cửa sổ bật lên titlesẽ được tiêm vào .popover-header.

Cửa sổ bật lên contentsẽ được tiêm vào .popover-body.

.arrowsẽ trở thành mũi tên của cửa sổ bật lên.

Phần tử bao bọc ngoài cùng phải có .popoverlớp.
Tiêu đề chuỗi | phần tử | hàm số ''

Giá trị tiêu đề mặc định nếu titlethuộc tính không có.

Nếu một hàm được cung cấp, nó sẽ được gọi với thistập tham chiếu của nó tới phần tử mà cửa sổ bật lên được gắn vào.
Kích hoạt sợi dây 'nhấp chuột' Cách kích hoạt cửa sổ bật lên - nhấp vào | di chuột qua | tiêu điểm | thủ công. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng. manualkhông thể kết hợp với bất kỳ trình kích hoạt nào khác.
bù lại số | sợi dây 0 Phần bù của cửa sổ bật lên so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo tài liệu bù đắp của Popper.js .
dự phòng chuỗi | mảng 'lật' Cho phép chỉ định vị trí mà Popper sẽ sử dụng khi dự phòng. Để biết thêm thông tin, hãy tham khảo tài liệu về hành vi của Popper.js
ranh giới chuỗi | yếu tố 'scrollParent' Ranh giới ràng buộc tràn của cửa sổ bật lên. Chấp nhận các giá trị của , 'viewport'hoặc một tham chiếu HTMLElement (chỉ JavaScript). Để biết thêm thông tin, hãy tham khảo tài liệu ngăn chặn dòng chảy của Popper.js .'window''scrollParent'

Thuộc tính dữ liệu cho các cửa sổ bật lên riêng lẻ

Các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định theo cách khác thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên.

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

$().popover(options)

Khởi tạo các cửa sổ bật lên cho một tập hợp phần tử.

.popover('show')

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ó cả tiêu đề và nội dung có độ dài bằng 0 sẽ không bao giờ được hiển thị.

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

.popover('hide')

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

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

.popover('toggle')

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.

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

.popover('dispose')

Ẩn và phá hủy cửa sổ bật lên của một phần tử. 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.

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

.popover('enable')

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.

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

.popover('disable')

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.

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

.popover('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ử.

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

.popover('update')

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

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

Sự kiện

Loại sự kiện Sự mô tả
show.bs.popover Sự kiện này kích hoạt ngay lập tức khi showphương thức thể hiện được gọi.
show.bs.popover Sự kiện này được kích hoạt khi cửa sổ bật lên hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
hide.bs.popover Sự kiện này được kích hoạt ngay lập tức khi hidephương thức thể hiện đã được gọi.
hidden.bs.popover Sự kiện này được kích hoạt khi cửa sổ bật lên hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
insert.bs.popover Sự kiện này được kích hoạt sau show.bs.popoversự kiện khi mẫu cửa sổ bật lên đã được thêm vào DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})