Bootstrap Popover

Trong hướng dẫn này, bạn sẽ học cách tạo cửa sổ bật lên bằng BootstrapPopover.

Tạo cửa sổ bật lên với Bootstrap Popover

Popover là một lớp phủ nhỏ của nội dung được sử dụng để hiển thị thông tin phụ của bất kỳ phần tử nào khi nó được người dùng nhấp vào, giống như trên iPad.

Bước 1: Thêm mã cửa sổ bật lên

Để tạo cửa sổ bật lên, bạn cần thêm thuộc tính data-bs-toggle="popover" vào một phần tử. Trong khi đó, tiêu đề của cửa sổ bật lên và nội dung của nó sẽ hiển thị khi kích hoạt hoặc kích hoạt có thể được chỉ định bằng cách sử dụng thuộc tính title và data-bs-content tương ứng.

Đây là mã tiêu chuẩn để thêm cửa sổ bật lên vào một button.

<button type="button" data-bs-toggle="popover" title="Popover title" data-bs-content="Here's some amazing content.">Click to toggle popover</button>

Tương tự, bạn có thể thêm cửa sổ bật lên vào các phần tử khác như liên kết, icon, v.v.

Lưu ý: Vì lý do hiệu suất, các api data cửa sổ bật lên là tùy chọn giống như tooltip, có nghĩa là để sử dụng cửa sổ bật lên, bạn phải tự khởi tạo chúng. Ngoài ra, các cửa sổ bật lên có tiêu đề và giá trị nội dung dài bằng 0 sẽ không bao giờ được hiển thị, cũng như việc kích hoạt các cửa sổ bật lên trên các phần tử ẩn sẽ không hoạt động.

Bước 2: Bật Popover

Popover có thể được kích hoạt thông qua JavaScript – chỉ cần gọi phương thức popover() của Bootstrap với hoặc bất kỳ bộ chọn CSS id hoặc class nào của phần tử được yêu cầu trong mã JavaScript của bạn.

Bạn có thể khởi tạo cửa sổ bật lên riêng lẻ hoặc tất cả cùng một lúc. Mã ví dụ sau sẽ khởi tạo tất cả các cửa sổ bật lên trên trang bằng cách chọn chúng theo thuộc tính data-bs-toggle của chúng.

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

Kết quả của ví dụ trên sẽ giống như sau:

Thiết lập vị trí của cửa sổ bật lên

Bạn có thể đặt cửa sổ bật lên xuất hiện ở trên cùng, bên phải, bên dưới và bên trái của một phần tử.

Thiết lập vị trí cửa sổ bật lên thông qua thuộc tính data

Ví dụ sau đây sẽ chỉ cho bạn cách thiết lập vị trí của các cửa sổ bật lên thông qua thuộc tính data.

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="Popover on top">Popover on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" title="Popover title" data-bs-content="Popover on right.">Popover on right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-bs-content="Popover on bottom.">Popover on bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="Popover on left.">Popover on left</button>

Thiết lập vị trí cửa sổ bật lên thông qua JavaScript

Ví dụ sau đây sẽ chỉ cho bạn cách thiết lập hướng của các cửa sổ bật lên thông qua JavaScript.

<script>
$(document).ready(function(){
    $("#popTop").popover({placement : "top"});
    $("#popRight").popover({placement : "right"});
    $("#popBottom").popover({placement : "bottom"});
    $("#popLeft").popover({ placement : "left"});
});
</script>

Ẩn Popover khi nhấp chuột tiếp theo

Theo mặc định, các cửa sổ bật lên sẽ không ẩn cho đến khi bạn nhấp vào phần tử kích hoạt một lần nữa. Bạn có thể sử dụng trigger focus để ẩn các cửa sổ bật lên khi người dùng thực hiện lần nhấp tiếp theo.

<a href="#" class="btn btn-primary" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="Here's some amazing content.">Dismissible popover</a>

Lưu ý: Để làm cho tính năng này hoạt động bình thường trên các trình duyệt, bạn phải sử dụng thẻ <a>, không phải thẻ <button> và bạn cũng phải bao gồm một thuộc tính tabindex.

Các tùy chọn của Bootstrap Popover

Có một số tùy chọn có thể được chuyển cho phương thức popover() của Bootstrap để tùy chỉnh chức năng của plugin popover.

Bạn có thể đặt các tùy chọn này thông qua việc sử dụng các thuộc tính data hoặc JavaScript. Để đặt tùy chọn cửa sổ bật lên thông qua thuộc tính data, chỉ cần thêm tên tùy chọn vào sau data-bs- cùng với giá trị chính xác, như data-bs-animation="false", data-bs-placement="top", v.v.

Ngoài ra, khi truyền các tùy chọn thông qua các thuộc tính data, hãy đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ camelCase thành kebab-case. Ví dụ, thay vì sử dụng data-bs-customClass="my-class", hãy sử dụng data-bs-custom-class="my-class".

Tuy nhiên, JavaScript là cách ưu tiên để đặt các tùy chọn này vì nó ngăn bạn khỏi công việc lặp đi lặp lại. Xem phần bên dưới để biết cách đặt tùy chọn cho các cửa sổ bật lên qua JavaScript.

Các phương thức của Bootstrap Popover

Đây là các phương thức tiêu chuẩn của Bootstrap Popover:

Cách truyền tùy chọn cho Bootstrap Popover

Bạn có thể truyền các tùy chọn cho các cửa sổ bật lên bằng cách sử dụng đối tượng options.

Ví dụ sau sẽ thiết lập tiêu đề cho các cửa sổ bật lên, nếu giá trị của thuộc tính title bị bỏ qua hoặc bị thiếu trong các phần tử đã chọn:

<script>
$(document).ready(function(){
    $("#myPopover").popover({
        title : "Default popover title"
    });
});
</script>

Ví dụ sau sẽ chỉ cho bạn cách đặt nội dung HTML bên trong cửa sổ bật lên:

<script>
$(document).ready(function(){
    $("#myPopover").popover({
        title: '<h4 class="custom-title"><i class="bi-info-circle-fill"></i> Popover info</h4>',
        content: '<p>This is a <em>simple example</em> demonstrating how to insert HTML code inside <strong>Bootstrap popover</strong>.</p>',
        html: true
    }); 
});
</script>

Ví dụ sau sẽ chỉ cho bạn cách kiểm soát thời gian hiển thị và ẩn cửa sổ bật lên bằng cách sử dụng tùy chọn delay của cửa sổ bật lên thông qua JavaScript.

<script>
$(document).ready(function(){
    // Show and hide popover with same speed
    $("#tinyPopover").popover({
        delay: 100
    });
    
    // Show and hide popover with different speed
    $("#largePopover").popover({
        delay: {show: 0, hide: 2000}
    }); 
});
</script>

Ví dụ sau đây sẽ chỉ cho bạn cách tạo mẫu tùy chỉnh của riêng bạn cho các cửa sổ bật lên Bootstrap thay vì sử dụng mẫu mặc định động thông qua JavaScript.

<script>
$(document).ready(function(){
    $('[data-bs-toggle="popover"]').popover({
        template: '<div class="popover"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div><div class="popover-footer"><a class="btn btn-secondary btn-sm close">Close</a></div></div>'
    });

    // Close popover on button click
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover("hide");
    });
});
</script>

Ví dụ sau sẽ chèn mã HTML được tạo động của cửa sổ bật lên ở cuối phần tử #wrapper thay vì phần tử mặc định <body>.

<script>
$(document).ready(function(){
    // Append popover HTML to wrapper element
    $("#myPopover").popover({
        container: "#wrapper"
    }); 
});
</script>

Lưu ý: Việc ghi đè giá trị tùy chọn container mặc định của cửa sổ bật lên không tạo ra bất kỳ sự khác biệt rõ ràng nào trên trang. Để xem kết quả thực tế, bạn cần kiểm tra DOM. Nhấn Ctrl + Shift + I (Windows / Linux) hoặc Cmd + Opt + I (Mac) để mở Công cụ dành cho nhà phát triển hoặc Trình kiểm tra DOM.

Tương tự, bạn có thể đặt các tùy chọn khác cho các cửa sổ bật lên. Hãy xem các phương thức khác của plugin Bootstrap popover.

show

Phương thức này hiển thị cửa sổ bật lên của một phần tử. Đây được coi là cách kích hoạt cửa sổ bật lên “thủ công”.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("show");
    }); 
});
</script>

hide

Phương thức này ẩn cửa sổ bật lên của một phần tử. Đây được coi là cách ẩn cửa sổ bật lên “thủ công” .

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("hide");
    }); 
});
</script>

toggle

Phương thức này chuyển đổi cửa sổ bật lên của một phần tử. Đây được coi là một cách “thủ công” để kích hoạt cửa sổ bật lên.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("toggle");
    }); 
});
</script>

dispose

Phương thức này ẩn và hủy cửa sổ bật lên của phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("dispose");
    }); 
});
</script>

enable

Phương thức này cung cấp khả năng hiển thị cửa sổ bật lên của một phần tử. Các cửa sổ bật lên được bật theo mặc định.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("enable");
    }); 
});
</script>

disable

Phương thức này loại bỏ khả năng hiển thị cửa sổ bật lên của một phần tử. Cửa sổ bật lên sẽ chỉ có thể được hiển thị nếu nó được bật lại.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("disable");
    }); 
});
</script>

toggleEnabled

Phương thức này bật / tắt khả năng hiển thị hoặc ẩn cửa sổ bật lên của một phần tử.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("toggleEnabled");
    }); 
});
</script>

update

Phương thức này cập nhật vị trí cửa sổ bật lên của một phần tử.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myPopover").popover("update");
    }); 
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn nhận được instance của popover được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    // Trigger the popover
    $("#myPopover").popover();
    
    // Get popover instance on button click
    $("#myBtn").click(function(){      	
        var myPopover = bootstrap.Popover.getInstance($("#myPopover")[0]);
        console.log(myPopover);
        // {_element: button#myPopover.btn.btn-primary.btn-lg, _isEnabled: true, _timeout: 0, _hoverState: null, _activeTrigger: {…}, …}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của popover được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp popover không được khởi tạo.

<script>
$(document).ready(function(){
    // Get or create popover instance on button click
    $("#myBtn").click(function(){
        var myPopover = bootstrap.Popover.getOrCreateInstance($("#myPopover")[0]);
        console.log(myPopover);
        // {_element: button#myPopover.btn.btn-primary.btn-lg, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {…}, …}
    });
});
</script>

Các sự kiện của Bootstrap Popover

Lớp popover của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng popover.

Ví dụ sau đây sẽ hiển thị một thông báo cảnh báo cho người dùng khi quá trình chuyển đổi mờ dần của cửa sổ bật lên đã được hoàn thành hoàn toàn.

<script>
$(document).ready(function(){
    // Initialize popover
    $("#myPopover").popover();

    // Show alert when the popover has finished being hidden 
    $("#myPopover").on("hidden.bs.popover", function(){
        alert("Popover has been completely closed.");
    });
});
</script>