Bootstrap 5 Cửa sổ bật lên
Popovers
Thành phần Popover tương tự như chú giải công cụ; nó là một hộp bật lên xuất hiện khi người dùng nhấp vào một phần tử. Sự khác biệt là cửa sổ bật lên có thể chứa nhiều nội dung hơn.
Cách tạo cửa sổ bật lên
Để tạo cửa sổ bật lên, hãy thêm thuộc tính data-bs-toggle="popover"
vào một phần tử.
Sử dụng thuộc tính title
để chỉ định văn bản tiêu đề của cửa sổ bật lên và sử dụng thuộc tính data-bs-content
để chỉ định văn bản sẽ được hiển thị bên trong nội dung của cửa sổ bật lên:
<button type="button" class="btn btn-primary" data-bs-toggle="popover"
title="Popover Header" data-bs-content="Some content inside the
popover">Toggle popover</button>
Lưu ý: Popover phải được khởi tạo bằng JavaScript để hoạt động.
Đoạn mã sau sẽ kích hoạt tất cả các cửa sổ bật lên trong tài liệu:
Ví dụ
<script>
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var
popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
Hãy tự mình thử » Định vị cửa sổ bật lên
Theo mặc định, cửa sổ bật lên sẽ xuất hiện ở bên phải phần tử.
Sử dụng thuộc tính data-bs-placement
để đặt vị trí của cửa sổ bật lên ở trên cùng, dưới cùng, bên trái hoặc bên phải của phần tử:
Ví dụ
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>
Hãy tự mình thử »Lưu ý: Thuộc tính vị trí không hoạt động như bạn mong đợi nếu không đủ chỗ cho chúng. Ví dụ: nếu bạn sử dụng vị trí trên cùng ở đầu trang (nơi không có chỗ cho nó), thay vào đó, nó sẽ hiển thị cửa sổ bật lên bên dưới phần tử hoặc ở bên phải (bất cứ nơi nào có chỗ cho nó).
Đóng cửa sổ bật lên
Theo mặc định, cửa sổ bật lên sẽ đóng khi bạn nhấp lại vào phần tử. Tuy nhiên, bạn có thể sử dụng thuộc tính data-bs-trigger="focus"
để đóng cửa sổ bật lên khi nhấp vào bên ngoài phần tử:
Ví dụ
<a href="#" title="Dismissible popover" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-content="Click anywhere in the document to
close this popover">Click me</a>
Hãy tự mình thử »Cửa sổ bật lên có thể di chuột
Mẹo: Nếu bạn muốn hiển thị cửa sổ bật lên khi di chuyển con trỏ chuột qua phần tử, hãy sử dụng thuộc tính data-bs-trigger
có giá trị là " hover
":
Ví dụ
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover"
data-bs-content="Popover text">Hover over me</a>
Hãy tự mình thử »