NTM Solutions

Thứ Năm, 6 tháng 4, 2017

Tự học Bootstrap - Cơ bản - bài 30 – Popover

Công cụ Popover

Popover là 01 cách đơn giản để tạo chú thích; nó là 01 hộp pop-up xuất hiện khi người dùng nhấp chuột lên 01 đối tượng. Sự khác biệt ở chỗ popover có thể chứa những thứ khác ngoài nội dung.



Mẹo: Công cụ có thể được cài đặt riêng (sử dụng file "popover.js" trong bộ nguồn Bootstrap's), hoặc tất cả trong 01 file "bootstrap.js" hoặc "bootstrap.min.js").

Cách tạo 01 Popover

Để tạo 01 popover, thêm thuộc tính data-toggle="popover" vào phần tử HTML.
Sử dụng thuộc tính title để xác định phần văn bản tiêu đề của popover, và dùng thuộc tính data-content để xác định phần văn bản sẽ hiển thị trong phần body của popover:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Ghi chú: Popovers phải được "khởi động" bằng jQuery : chọn đối tượng và gọi phương thức popover().
Đoạn mã sau sẽ kích hoạt tất cả popovers trên trang web:
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>



Định vị trí Popovers

Mặc định, popover sẽ xuất hiện bên phải phần tử.
Sử dụng thuộc tính data-placement để định vị trí của popover ở đỉnh, đáy, trái hoặc bên phải phần tử:
<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 data-placement với 01 giá trị "auto" ở phía trước, giúp cho trình duyệt tự quyết định vị trí của popover. Ví dụ:, nếu giá trị là "auto left", popover sẽ xuất hiện bên trái nếu có thể, còn không thì sẽ xuất hiện bên phải đối tượng.

Đóng Popovers

Mặc định, popover sẽ đóng khi bạn bấm thêm lần nữa lên phần tử. Tuy nhiên, bạn có thể sử dụng thuộc tính data-trigger="focus" nếu muốn đóng popover khi bấm 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>


Mẹo: Nếu bạn muốn popover hiển thị khi bạn rê chuột lên phần tử, dùng thuộc tính data-trigger với giá trị là "hover"

Ví dụ:


<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48