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