Bootstrap JS Popover
JS Popover (popover.js)
Plugin Popover tương tự như chú giải công cụ; nó là một hộp bật lên xuất hiện khi người dùng nhấp vào một phần tử. Sự khác biệt là cửa sổ bật lên có thể chứa nhiều nội dung hơn.
Sự phụ thuộc của plugin: Popovers yêu cầu plugin chú giải công cụ (tooltip.js) phải được đưa vào phiên bản Bootstrap của bạn.
Để biết hướng dẫn về Popovers, hãy đọc Hướng dẫn về Popover Bootstrap của chúng tôi.
Thông qua thuộc tính data-*
data-toggle="popover" kích hoạt cửa sổ bật lên.
Thuộc tính title chỉ định văn bản tiêu đề của cửa sổ bật lên.
Thuộc tính data-content chỉ định văn bản sẽ được hiển thị bên trong nội dung của cửa sổ bật lên.
Ví dụ
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Hãy tự mình thử »Thông qua JavaScript
Popovers không phải là plugin chỉ có CSS và do đó phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức popover() .
Ví dụ
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Hãy tự mình thử » Tùy chọn bật lên
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data-, như trong data-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
Try it |
| container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' |
Try it |
| content | string | "" | Specifies the text inside the popover's body | Try it |
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it |
Try it |
| html | boolean | false | Specifies whether to accept HTML tags in the popover:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
Try it |
| placement | string | "right" | Specifies the popover position. Possible values:
|
Try it |
| selector | string, or the boolean false | false | Adds the popover to a specified selector | Try it |
| template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-title. The popover's content will be injected into the .popover-content. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class. |
||
| title | string | "" | Specifies the header text of the popover | Try it |
| trigger | string | "click" | Specifies how the popover is triggered. Possible values:
|
Try it |
| viewport | string, or object | {selector: "body", padding: 0} | Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
Phương pháp bật lên
Bảng sau liệt kê tất cả các phương thức bật lên có sẵn.
| Method | Description | Try it |
|---|---|---|
| .popover( options ) | Activates the popover with an option. See options above for valid values | Try it |
| .popover("show") | Shows the popover | Try it |
| .popover("hide") | Hides the popover | Try it |
| .popover("toggle") | Toggles the popover | Try it |
| .popover("destroy") | Hides and destroys the popover | Try it |
Sự kiện bật lên
Bảng sau liệt kê tất cả các sự kiện bật lên có sẵn.
| Event | Description | Try it |
|---|---|---|
| show.bs.popover | Occurs when the popover is about to be shown | Try it |
| shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.popover | Occurs when the popover is about to be hidden | Try it |
| hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | Try it |
Thêm ví dụ
Thiết kế cửa sổ bật lên tùy chỉnh
Sử dụng CSS để tùy chỉnh giao diện của cửa sổ bật lên:
Ví dụ
/* Popover */
.popover {
border: 2px dotted red;
}
/* Popover Header */
.popover-title {
background-color: #73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
} Hãy tự mình thử »