FullStack Academy

Popover trong Bootstrap 4

Chào mọi người, chúng ta cùng nhau đi đến với Popover trong Bootstrap 4 của bài học hôm nay nhé.  Về cơ bản, Popover khá giống với Tooltip. Điều khác biệt là Tooltip thì sử dụng hover để làm sự kiện, Popover thì lại sử dụng sự kiện onclick. Giờ thì cùng nhau tìm hiểu về Popover nhé.

Cách tạo Popover trong Bootstrap 4

Để tạo Popover, các bạn thêm thuộc tính data-toggle="popover" vào element cần thiết.

Sử dụng thuộc tính title để thêm nội dung text phần đầu cho popover đó, và sử dụng thuộc tính data-content để thêm nội dung chính của popover. 
Ví dụ:
<a href="#" data-toggle="popover" title="FullStack Academy" data-content="Học qua dự án thực tế cùng giảng viên doanh nghiệp">Toggle popover</a>
Lưu ý: Popover phải được khởi tạo với cú pháp khai báo trong jQuery, sau đó chọn phần tử được chỉ định và gọi phương thức popover(). Ví dụ:

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



 

Định vị vị trí hiển thị của các Popover

Theo mặc định, Popover sẽ hiển thị ở phía bên phải của element. Vậy nếu như muốn Popover xuất hiện ở các vị trí khác mà bạn mong muốn như trên, dưới hay trái thì Bootstrap 4 cung cấp cho chúng ta thuộc tính giống với phần Tooltip là data-placement, giá trị là các vị trí định vị:

  • top
  • left
  • right
  • bottom

Ví dụ:



 

Đóng Popover

Theo mặc định, các popover sẽ được đóng khi bạn click lại trên thẻ có gắn popover đó 1 lần nữa. Tuy nhiên, bạn có thể sử dụng thuộc tính data-trigger="focus" để đóng popover khi bạn click vào bất cứ vùng nào ngoài thẻ cũng được.

Nếu bạn muốn Popover hiện khi hover vào thẻ giống như Tooltip thì chúng ta dùng data-trigger="hover"



Dạng hover cho Popover:


Kết luận

Khi biết sử dụng popover và tooltip, bạn có thể làm được nhiều hiệu ứng cho website. Hẹn gặp lại các bạn trong bài viết sau.