Bài 25: Popover trong Bootstrap 4

0
65

Hello cả nhà, bài trước mình đã hướng dẫn các bạn cách thức tạo Tooltip với Bootstrap 4 rồi, hôm nay cũng là 1 dạng họ hàng với tooltip đó là Popover, chỉ khác Tooltip hover chuột vào hiển thị thì Popover cần click vào đối tượng thì popup sẽ hiển thị lên.

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 thành phần.

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ụ:

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ụ:

Hiển thị kết quả của 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 thành phần. 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 data-placement, giá trị là các vị trí định vị:

  • top
  • left
  • right
  • bottom

Ví dụ:

Hiển thị kết quả:

Đóng Popover

Theo mặc định, các popover sẽ được đóng khi bạn click lại trên thành phần đó 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. Thuộc tính này khá hay và tiện lợi đúng không nào!

Ví dụ:

Nếu bạn muốn popover được hiển thị khi đưa chuột vào và ẩn đi khi đưa chuột ra khỏi thành phần, sử dụng thuộc tính data-trigger=”hover”, như sau:

Hiển thị 2 dạng như sau:

  • Dạng đóng popover ở vùng bên ngoài:
  • Dạng hover cho Popover:

Kết luận

OK, vậy là mình đã hướng dẫn các bạn xong phần Popover rồi, kết hợp với cả Tooltip bài trước thì các bạn đã có những sự lựa chọn làm Popup thông báo tuyệt vời rồi, rất nhiều cách để các bạn lựa chọn và đáp ứng dudwjocj gần như tất cả các định dạng popup mà các bạn muốn làm rồi đúng không nào.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây