1. Khái niệm về Popover
Popover Boostrap là một dạng tooltip [Xem bài viết về Tooltip] trong Bootstrap hỗ trợ hiện thị thông tin ghi chú khá đẹp, không chỉ hỗ trợ hiện thị nội dung dưới dạng text mà còn cho phép hiện thị nội dung với cấu trúc html phức tạp mang lại hiệu quả và tính thẩm mỹ cao trong phát triển layout website. Tuy nhiên, popover khác tooltip ở chỗ bạn click chuột vào phần tử thì popover mới xuất hiện còn tooltip thì chỉ cần hover vào phần tử là tooltip hiển thị. Như tooltip, popover là plugin độc lập của Bootstrap nên bạn có thể nhúng popover.js hoặc sử dụng bootstrap.js hoặc bootstrap.min.jspopover.js hoặc sử dụng bootstrap.js hoặc bootstrap.min.js
2. Sử dụng Popover
Khai báo sử dụng popover khá đơn giản, ở phần html các bạn sử dụng đoạn mã sau:
Cách tạo Popover
Click here to display Popover
Các thuộc tính của popover
- data-toggle=”popover”: Đây là thuộc tính bắt buộc không thể thiếu để có thể hiển thị được popover.: Đây là thuộc tính bắt buộc không thể thiếu để có thể hiển thị được popover.
- title: Là tiêu đề của popover sẽ hiện ra: Là tiêu đề của popover sẽ hiện ra
- data-content: Nội dung trong popover: Nội dung trong popover
Tất nhiên, chúng ta phải khai báo đoạn mã javascript dưới đây để hoàn thành bước tạo popover:
$[function []{
$['[data-toggle="popover"]'].popover[];
}];
Kết quả hiển thị như sau:
Popover with HTML