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

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

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.

Tên Kiểu Giá trị mặc định Mô tả
animation boolean true Áp dụng một chuyển đổi CSS mờ dần cho cửa sổ bật lên.
container string | element | false false

Thêm cửa sổ bật lên cho một phần tử cụ thể.

Chỉ định container: 'body' để tránh các sự cố hiển thị trong các thành phần phức tạp hơn (như input group, button group, v.v.)

content string | element | function '' Đặt giá trị nội dung mặc định nếu thuộc tính data-bs-content không có.
delay number | object 0

Thời gian trì hoãn hiển thị và ẩn cửa sổ bật lên (mili giây) - không áp dụng cho loại kích hoạt thủ công.

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện.

Cấu trúc đối tượng là: delay: { "show": 500, "hide": 100 }

html boolean false

Chèn HTML vào cửa sổ bật lên.

Nếu false, thuộc tính innerText sẽ được sử dụng để chèn nội dung vào DOM.

Sử dụng văn bản đơn giản nếu bạn lo lắng về các cuộc tấn công XSS.

placement string | function 'right'

Đặt vị trí của cửa sổ bật lên — auto | top | bottom | left | right.

Khi giá trị auto được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên.

selector string | false false

Nếu một bộ chọn được cung cấp, các đối tượng bật lên sẽ được gắn vào các mục tiêu được chỉ định.

Điều này thường được sử dụng để áp dụng các cửa sổ bật lên cho các phần tử DOM được thêm động.

template string '<div class="popover"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML cơ sở để sử dụng khi tạo cửa sổ bật lên.

title của cửa sổ bật lên sẽ được chèn vào phần tử .popover-header.

content của cửa sổ bật lên sẽ được chèn vào phần tử .popover-body.

Phần tử .popover-arrow sẽ trở thành mũi tên của cửa sổ bật lên.

Phần tử bao bọc ngoài cùng phải có lớp .popover.

title string | element | function '' Đặt giá trị tiêu đề mặc định nếu thuộc tính title không có.
trigger string 'click'

Chỉ định cách kích hoạt cửa sổ bật lên — click | hover | focus | manual. Bạn có thể truyền vào nhiều trình kích hoạt; ngăn cách bằng một khoảng trắng.

Giá trị manual chỉ ra rằng cửa sổ bật lên sẽ được kích hoạt theo chương trình thông qua các phương thức .show(), .hide().toggle(); giá trị này không thể được kết hợp với bất kỳ trình kích hoạt nào khác.

fallbackPlacements array ['top', 'right', 'bottom', 'left'] Cho phép bạn chỉ định vị trí mà Popper sẽ sử dụng dự phòng.
boundary string | element 'clippingParents' Ranh giới ràng buộc tràn của cửa sổ bật lên (chỉ áp dụng cho công cụ sửa đổi preventOverflow của Popper). Nó cũng có thể chấp nhận một tham chiếu HTMLElement (chỉ qua JavaScript).
customClass string | function ''

Thêm các lớp vào cửa sổ bật lên khi nó được hiển thị. Xin lưu ý rằng các lớp này sẽ được thêm vào bên cạnh bất kỳ lớp nào được chỉ định trong mẫu. Để thêm nhiều lớp, hãy phân tách chúng bằng các khoảng trắng như sau: 'class1 class2'.

Bạn cũng có thể truyền vào một hàm trả về một chuỗi đơn chứa các tên lớp bổ sung.

sanitize boolean true Bật hoặc tắt tính năng sanitize. Nếu được kích hoạt các tùy chọn 'template', 'content''title' sẽ được sanitize.
allowList object Default value Đối tượng chứa các thuộc tính và thẻ được phép.
sanitizeFn null | function null Cho phép bạn chỉ định hàm sanitize của riêng bạn.
offset array | string | function [0, 8] Độ lệch vị trí của cửa sổ bật lên so với ban đầu của nó. Bạn cũng có thể truyền một chuỗi trong thuộc tính data với các giá trị được phân tách bằng dấu phẩy như: data-bs-offset="10,20"
popperConfig null | object | function null Cho phép bạn thay đổi cấu hình Popper mặc định của Bootstrap, xem cấu hình của Popper.

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.

Tên sự kiện Mô tả
show.bs.popover Sự kiện này kích hoạt ngay lập tức khi phương thức show được gọi.
shown.bs.popover Sự kiện này được kích hoạt khi cửa sổ bật lên đã được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt.
hide.bs.popover Sự kiện này được kích hoạt ngay lập tức khi phương thức hide được gọi.
hidden.bs.popover Sự kiện này được kích hoạt khi cửa sổ bật lên bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt.
inserted.bs.popover Sự kiện này được kích hoạt sau sự kiện show.bs.popover khi cửa sổ bật lên đã được thêm vào DOM.

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>
BootstrapBootstrap Nâng Cao
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.