Article Directory
Bootstrap pop-up box (Popover) plugin
Popovers are similar to tooltips, providing an expanded view. To activate a popover, the user simply hovers over the element. The content of the popover can be filled entirely using the Bootstrap Data API (Bootstrap Data API). This method relies on tooltips.
If you want to reference the functionality of the plugin alone, then you need to reference popover.js, which depends on the Tooltip plugin. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.
usage
The Popover plugin generates content and markup on demand, and by default places popovers behind their triggering elements. You can add a popover in two ways:
- Via the data attribute: To add a popover, simply add data-toggle="popover" to an anchor/button tag. The title of the anchor is the text of the popover. By default, the plugin sets the popover to the top.
<a href="#" data-toggle="popover" title="Example popover"> 请悬停在我的上面 </a> - Via JavaScript: Enable popover via JavaScript:
$('#identifier').popover(options)
The Popover plugin is not a pure CSS plugin like the dropdown menus and other plugins discussed earlier. To use the plugin you must activate it with jquery (reads javascript). Use the following script to enable all popovers on the page:
$(function () { $("[data-toggle='popover']").popover(); });
example
The following example demonstrates the use of the Popover plugin via the data attribute.
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function (){
$("[data-toggle='popover']").popover();
});
</script>
</div>
The result looks like this:
options
Some options are added through the Bootstrap Data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:
| option name | type/default | Data attribute name | describe |
|---|---|---|---|
| animation | boolean default: true | data-animation | Applies a CSS fade transition effect to the popover. |
| html | boolean default: false | data-html | Insert HTML into the popup. If false, jQuery's text method will be used to insert content into the dom. Use text if you are concerned about XSS attacks. |
| placement | string I function default value: top | data-placement | Specifies how to position the popup (ie top I bottom I left I right I auto). When specified as auto, the popup will be dynamically adjusted. For example, if placement is "auto left", the popup will be displayed on the left if possible, and on the right if it is not allowed. |
| selector | string default: false | data-selector | If a selector is provided, the popover object will be delegated to the specified target. |
| title | string I function default value: '' | data-title | The title option is the default title value if no title attribute is specified. |
| trigger | string default: 'hover focus' | data-trigger | Define how to trigger the popover: click I hover I focus I manual. You can pass multiple triggers, each separated by a space. |
| delay | number I object default value: 0 | data-delay | The number of milliseconds to delay showing and hiding the popover - not applicable for manual trigger types. If a number is provided, the delay will be applied for showing and hiding. If an object is provided, the structure is as follows: delay: { show: 500, hide: 100 } |
| container | string I false Default value: false | data-container | Appends a popover to the specified element. Example: container: 'body' |
method
Here are some useful methods in the Popover plugin:
| method | describe | example |
|---|---|---|
| Options: .popover(options) | Appends a popover handle to the collection of elements. | $().popover(options) |
| Toggle: .popover(‘toggle’) | Toggle show/hide element's popover. | $('#element').popover('toggle') |
| Show: .popover(‘show’) | Displays the element's popover.$('#element').popover('show') |
|
| Hide: .popover(‘hide’) | Hides the element's popover. | $('#element').popover('hide') |
| Destroy: .popover(‘destroy’) | Hides and destroys the element's popover. | $('#element').popover('destroy') |
example
The following example demonstrates the approach of the Popover plugin:
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default popover-show"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容 —— show 方法">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary popover-hide"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容 —— hide 方法">
顶部的 Popover
</button>
<button type="button" class="btn btn-success popover-destroy"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容 —— destroy 方法">
底部的 Popover
</button>
<button type="button" class="btn btn-warning popover-toggle"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
右侧的 Popover
</button><br><br><br><br><br><br>
<p class="popover-options">
<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
data-container="body" data-toggle="popover" data-content="
<h4>Popover 中的一些内容 —— options 方法</h4>">
Popover
</a>
</p>
<script>
$(function () {
$('.popover-show').popover('show');});
$(function () {
$('.popover-hide').popover('hide');});
$(function () {
$('.popover-destroy').popover('destroy');});
$(function () {
$('.popover-toggle').popover('toggle');});
$(function () {
$(".popover-options a").popover({
html : true });});
</script>
</div>
The result looks like this:
event
The following table lists the events to be used in the Popover plugin. These events can be used as hooks in functions.
| event | describe | example |
|---|---|---|
| show.bs.popover | This event is fired immediately when the show instance method is called. | $('#mypopover').on('show.bs.popover', function () {
// 执行一些动作...}) |
| shown.bs.popover | This event is fired when the popover becomes visible to the user (will wait for CSS transitions to complete). | $('#mypopover').on('shown.bs.popover', function () {
// 执行一些动作...}) |
| hide.bs.popover | This event is fired immediately when the hide instance method is called. | $('#mypopover').on('hide.bs.popover', function () {
// 执行一些动作...}) |
| hidden.bs.popover | This event is fired when the tooltip is hidden from the user (will wait for CSS transitions to complete). | $('#mypopover').on('hidden.bs.popover', function () {
// 执行一些动作...}) |
example
The following example demonstrates the events of the Popover plugin:
<div clas="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-primary popover-show"
title="Popover title" data-container="body"
data-toggle="popover"
data-content="左侧的 Popover 中的一些内容 —— show 方法">
左侧的 Popover
</button>
</div>
<script>
$(function () {
$('.popover-show').popover('show');});
$(function () {
$('.popover-show').on('shown.bs.popover', function () {
alert("当显示时警告消息");
})
});
</script>
</div>
The result looks like this:
