Bootstrap 5 hộp bật lên

Hộp thông báo

Hộp thông báo (Popover) thành phần tương tự như công cụ chỉ dẫn; nó là một hộp thông báo xuất hiện khi người dùng nhấp vào phần tử. Khác biệt ở chỗ hộp thông báo có thể chứa nhiều nội dung hơn.

Cách tạo hộp thông báo

Để tạo hộp thông báo, hãy đặt data-bs-toggle="popover" thuộc tính này để thêm vào phần tử.

Vui lòng sử dụng title Thuộc tính xác định văn bản tiêu đề của hộp thông báo và sử dụng data-bs-content Thuộc tính xác định văn bản hiển thị trong văn bản hộp thông báo:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Tiêu đề hộp thông báo" data-bs-content="Nội dung trong hộp thông báo">Bật tắt hộp thông báo</button>

Lưu ý:Hộp thông báo phải được khởi tạo bằng JavaScript mới có thể hoạt động.

Mã sau đây sẽ kích hoạt tất cả các hộp thông báo trong tài liệu:

Mẫu

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

Thử ngay

Định vị hộp thông báo

Mặc định, hộp thông báo sẽ xuất hiện ở bên phải của phần tử.

Vui lòng sử dụng data-bs-placement Cài đặt vị trí của hộp thông báo khi di chuyển ở trên, dưới, bên trái hoặc bên phải của phần tử:

Mẫu

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Trên cùng</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Dưới đáy</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Nội dung">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Nội dung">Right</a>

Thử ngay

Lưu ý:Nếu không có không gian đủ, thuộc tính placement sẽ không hoạt động như mong đợi. Ví dụ: Nếu bạn sử dụng thuộc tính placement top (không có không gian dự trữ) trên đầu trang của trang, nó sẽ thay đổi để hiển thị hộp bật lên dưới hoặc bên phải phần tử (bất kỳ nơi nào có không gian).

Đóng hộp bật lên

Mặc định, hộp bật lên sẽ đóng lại khi nhấp vào phần tử lần nữa. Tuy nhiên, bạn có thể sử dụng data-bs-trigger="focus" Thuộc tính, thiết lập thuộc tính này để đóng hộp bật lên khi nhấp ngoài phần tử:

Mẫu

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Bấm vào bất kỳ vị trí nào trong tài liệu để đóng hộp bật lên này">Nhấp vào tôi</a>

Thử ngay

Hộp bật lên trôi nổi

Lưu ý:Nếu bạn muốn hộp bật lên hiển thị khi di chuột qua phần tử, hãy sử dụng giá trị "hover" của data-bs-trigger Thuộc tính:

Mẫu

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Text của hộp bật lên">Nhấp vào đây để trượt qua</a>

Thử ngay