Bootstrap JS Popover
JS Popover
Thành phần 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.
Để có hướng dẫn về Popover, hãy đọc Hướng dẫn Bootstrap Popover của chúng tôi .
Bật qua dữ liệu- * Thuộc tính
Kích data-toggle="popover"
hoạt cửa sổ bật lên.
Thuộc title
tính chỉ định văn bản tiêu đề của cửa sổ bật lên.
Thuộc data-content
tính chỉ định văn bản sẽ được hiển thị bên trong nội dung cửa sổ bật lên.
Thí dụ
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Qua JavaScript
Popover không phải là plugin chỉ CSS và do đó phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi
popover()
phương thức.
Thí dụ
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Tùy chọn bật lên
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-position = "".
Name | Type | Default | Description | Try it |
---|---|---|---|---|
animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
|
container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' |
|
content | string | "" | Specifies the text inside the popover's body | |
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 |
|
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 |
|
placement | string | "right" | Specifies the popover position. Possible values:
|
|
selector | string, or the boolean false | false | Adds the popover to a specified selector | |
template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-header. The popover's content will be injected into the .popover-body. .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 | |
trigger | string | "click" | Specifies how the popover is triggered. Possible values:
|
|
offset | number or a string | 0 | Offset of the popover relative to its target | |
fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
boundary | string or element | "scrollParent" | Overflow constraint boundary of the popover. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
Phương thức 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 | |
.popover("show") | Shows the popover | |
.popover("hide") | Hides the popover | |
.popover("toggle") | Toggles the popover | |
.popover("dispose") | Hides and destroys the popover | |
.popover("enable") | Enables the popover the ability to be shown. This is default | |
.popover("disable") | Removes the ability to show a popover. The popover can only be shown if it is re-enabled again | |
.popover("toggleEnabled") | Toggles the ability for the popover to be shown or hidden | |
.popover("update") | Updates the position of the popover |
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 | |
shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | |
hide.bs.popover | Occurs when the popover is about to be hidden | |
hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | |
inserted.bs.popover | Occurs after the show.bs.popover event when the popover template has been added to the DOM |