Bootstrap Popover Plugin
Plugin bật lên
Plugin 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.
Mẹo: Các plugin có thể được bao gồm riêng lẻ (sử dụng tệp "popover.js" của Bootstrap) hoặc tất cả cùng một lúc (sử dụng "bootstrap.js" hoặc "bootstrap.min.js").
Cách tạo cửa sổ bật lên
Để tạo cửa sổ bật lên, hãy thêm data-toggle="popover"
thuộc tính vào một phần tử.
Sử dụng titlethuộc tính để chỉ định văn bản tiêu đề của cửa sổ bật lên và sử dụng data-contentthuộc tính để chỉ định văn bản sẽ được hiển thị bên trong nội dung cửa sổ bật lên:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Lưu ý: Các cửa sổ bật lên phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi popover()phương thức.
Đ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:
Thí dụ
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Định vị Popovers
Theo mặc định, cửa sổ bật lên sẽ xuất hiện ở phía bên phải của phần tử.
Sử dụng data-placementthuộc tính để đặ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ử:
Thí dụ
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Mẹo: Bạn cũng có thể sử dụng thuộc tính vị trí dữ liệu với giá trị là "tự động", sẽ cho phép trình duyệt quyết định vị trí của cửa sổ bật lên. Ví dụ: nếu giá trị là "tự động bên trái", cửa sổ bật lên sẽ hiển thị ở bên trái khi có thể, nếu không ở bên phải.
Đóng cửa sổ bật lên
Theo mặc định, cửa sổ bật lên bị đóng khi bạn nhấp lại vào phần tử. Tuy nhiên, bạn có thể sử dụng data-trigger="focus"thuộc tính sẽ đóng cửa sổ bật lên khi nhấp vào bên ngoài phần tử:
Thí dụ
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Mẹo: Nếu bạn muốn cửa sổ bật lên được hiển thị khi bạn di chuyển con trỏ chuột qua phần tử, hãy sử dụng data-triggerthuộc tính có giá trị là "hover":
Thí dụ
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Toàn bộ tài liệu tham khảo về cửa sổ bật lên Bootstrap
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện bật lên, hãy truy cập Tài liệu tham khảo bật qua Bootstrap JS của chúng tôi .