Tạo ra Popover với Boostrap

Popover là một hộp thoại nhỏ hiện thị bên cạnh cạnh đối tượng được bấm vào. Popover hoạt động căn cứ vào JS, nó lấy dữ liệu từ thuộc tính của phần tử bấm vào.

Kích hoạt Popover

Hãy cho thêm đoạn JS sau khi trang được tải

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

Với đoạn JS trên thì bất kỳ phần tử nào có thuộc tính data-toggle="popover" nó sẽ được xem xét để hiện thị Popover

Tạo Popover

Phần tử nào muốn hiện thị Popover thì cho nó thêm thuộc tính data-toggle="popover", thuộc tính title="" là tiêu đề của Popover, thuộc tính data-content="" là nội dung mà Popover hiện thị

Ví dụ: Bấm vào đây

<button type="button"
        data-toggle="popover"
        title="Tiêu đề Popover"
        data-content="Nội dung mà Popover hiện thị"
        class="btn btn-primary">
    Bấm vào đây
</button>

data-trigger="focus"

Nếu muốn Popover tự động đóng lại khi bấm chuột bên ngoài khi Popover hiện thị cho thêm vào thuộc tính data-trigger="focus" Bấm vào đây

<button type="button"
    data-toggle="popover"
    data-trigger="focus"
    title="Tiêu đề Popover"
    data-content="Nội dung mà Popover hiện thị"
    class="btn btn-danger btn-sm">
    Bấm vào đây
</button>