Plugin Popover Bootstrap
Plugin Popover
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 đưa vào riêng lẻ (sử dụng tệp "popover.js" riêng lẻ 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 thuộc tính data-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-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:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a> Lưu ý: Popover phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức popover() .
Đ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>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</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-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-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>
Hãy tự mình thử »Mẹo: Bạn cũng có thể sử dụng thuộc tính vị trí dữ liệu có giá trị "tự động", thuộc tính này 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à "auto left", cửa sổ bật lên sẽ hiển thị ở bên trái khi có thể, nếu không thì ở bên phải.
Đó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-trigger="focus" sẽ đó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-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Hãy tự mình thử » 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-trigger có giá trị là "hover":
Ví dụ
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Hãy tự mình thử »Tham khảo Popover Bootstrap hoàn chỉnh
Để 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 về Popover JS Bootstrap của chúng tôi.
