[Bootstrap] Phần 26: Popover

Bài viết này sẽ hướng dẫn chúng ta sẽ học về popover. Tương tự như tooltip, popver là 1 hộp pop-up xuất hiện khi người dùng nhấn chuột lên 1 phần tử nào đó. Sự khác nhau giữa tooltip và popover là popover chứa nhiều nội dung hơn.

Cách tạo 1 Popover
Đầu tiên, chúng ta cũng nhúng tập tin “popover.js” hay “bootstrap.js” hay “bootstrap.min.js” để định nghĩa popover.

Chúng ta thêm thuộc tính data-toggle=”popover” vào phần tử, sau đó dùng thuộc tính title để đặc tả phần đầu văn bản của popover, và dùng thuộc tính data-content để đặc tả văn bản hiển thị bên trong nội dung popover.

<div class="container">
	<a href="#" data-toggle="popover" title="Phần đầu Popover" data-content="Nội dung bên trong Popover">dammio.com</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>

Trong ví dụ trên, khi bạn nhấn vào liên kết dammio.com thì sẽ hiện thị ra popover, nhấn 1 lần nữa thì popover sẽ biến mất.

Vị trí popover
Tương tự như tooltip, popover cũng dùng thuộc tính data-placement để định nghĩa vị trí hiển thị popover (top, bottom, left, right).

<div class="container">
	<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Nội dung">dammio.com</a>
	<br/>
	<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Nội dung">dammio.com</a>
	<br/>
	<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Nội dung">dammio.com</a>
	<br/>
	<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Nội dung">dammio.com</a>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>

Đóng Popover
Theo mặc định, popover sẽ được đóng nếu bạn nhấn chuột vào phần tử lúc mở 1 lần nữa. Tuy nhiên, chúng ta có thể dùng thuộc tính data-trigger=”focus” để đóng popover khi nhấn chuột ngoài vùng phần tử đóng.

<div class="container">
	<a href="#" title="Đóng popover" data-toggle="popover" data-trigger="focus" data-content="Nhấn chuột lên bất cứ nơi nào ngoài liên kết để đóng popover">dammio.com</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>

Nếu bạn muốn rê chuột vào vùng phần tử thì mở popover, rê chuột ở vùng khác vùng phần tử là đóng popover thì có thể đặt giá trị của thuộc tính data-trigger là “hover”.

<div class="container">
	<a href="#" title="Tiêu đề" data-toggle="popover" data-trigger="hover" data-content="Nội dung">dammio.com</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>

Như vậy, bài viết đã hướng dẫn xong bạn cách tạo popover trong Bootstrap. Tùy trường hợp, bạn có thể áp dụng popover để tăng tính tương tác giữa người dùng và giao diện trang Web.