English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Popover (Popover) Plugin

The Popover (Popover) is similar to the Tooltip (Tooltip) and provides an extended view. To activate the popover, the user just needs to hover the mouse over the element. The content of the popover can be completely filled using the Bootstrap Data API (Bootstrap Data API). This method depends on the tooltip.

If you want to refer to the functionality of this plugin separately, then you need to refer to popover.js, it depends on Tooltip (Tooltip) plugin. Or, as Bootstrap Plugin Overview As mentioned in the chapter, you can refer to bootstrap.js or the compressed version of bootstrap.min.js.

Usage

The Popover plugin generates content and markers based on requirements, and by default, it places the popover (popover) after their trigger elements. You can add a popover (popover) in the following two ways:

  • Through data attributeTo add a Popover (Popover), simply add an anchor to/Button label addition data-toggle="popover" Anchor title is the text of the Popover (Popover). By default, the plugin sets the Popover (Popover) at the top.

    <a　href="#"　data-toggle="popover"　title="Example　popover">
　　　　Please hover over me
</a>

  • Through JavaScript:Enable the Popover (Popover) through JavaScript:

    $('#identifier').popover(options)

The Popover (Popover) plugin is not a pure CSS plugin like the dropdown menu and other plugins discussed earlier. To use this plugin, you must activate it with jQuery (read JavaScript). Use the following script to enable all popovers (popovers) on the page:

$(function　()　{　$("[data-$("[data-toggle='popover']").popover();　});

Online Example

The following example demonstrates the usage of the Popover (Popover) plugin through the data attribute.

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Popover (Popover) plugin</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
Test and see ‹/›

The results are as shown below:

Options

Some options are added through Bootstrap Data API or called via JavaScript. The following table lists these options:

Option nameType/Default valueData attribute namedescription
animationboolean
Default value: true		data-animationApply CSS fade transition effect to the popup window.
htmlboolean
Default value: false		data-htmlInsert HTML into the pop-up box. If false, jQuery's text method will be used to insert content into the dom. If you are concerned about XSS attacks, please use text.
placementstring|function
Default value: top		data-placementSpecify how to position the pop-up box (i.e., top|bottom|left|right|auto).
When specified as auto The pop-up will be dynamically adjusted. For example, if placement is "auto left", the pop-up will be displayed on the left as much as possible, and it will display on the right if the situation does not allow it.
selectorstring
Default value: false		data-selectorIf a selector is provided, the pop-up object will be delegated to the specified target.
titlestring | function
Default value: ''		data-titleIf not specified title If the title option is not specified, it is the default title value.
triggerstring
Default value: 'hover focus'		data-triggerDefine how to trigger the pop-up box: click| hover | focus | manual.You can pass multiple triggers, separated by spaces.
delaynumber | object
Default value: 0		data-delayMilliseconds to delay the display and hide of the pop-up box - Not applicable to manual trigger type. If a number is provided, the delay will be applied to both display and hide. If an object is provided, the structure is as follows:
delay:
{　show:　500,　hide:　100　}
containerstring | false
Default value: false		data-containerAppend a pop-up box to the specified element.
Example: container: 'body'

Methods

Here are some useful methods in the Popover plugin:

MethodsdescriptionExample
Options: .popover(options)Attach pop-up handlers to the set of elements.
$().popover(options)
Toggle: .popover('toggle')Toggle the display./Hide the pop-up box of the element.
$('#element').popover('toggle')
Show: .popover('show')Show the pop-up box of the element.
$('#element').popover('show')
Hide: .popover('hide')Hide the pop-up box of the element.
$('#element').popover('hide')
Destroy: .popover('destroy')隐藏并销毁元素的弹出框。
$('#element').popover('destroy')

Online Example

下面的示例演示了弹出框(Popover)插件的方法：

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　弹出框(Popover)插件方法
		顶部的　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>






	
		Title"　　
		　　　data-container="body"　data-toggle="popover"　data-content="
																	　
Popover　中的一些内容　——　options　方法
">
			Popover
		</a>
	</p>
	<script>
		$(function () { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		-options a
	</script>
</div>
</body>
</html>
Test and see ‹/›

The results are as shown below:

event

The following table lists the events used in the Popover plugin. These events can be used as hooks in functions.

eventdescriptionExample
show.bs.popoverThis event is triggered immediately when the show method is called.
$('#mypopover').on('show.bs.popover', function () {
　　//　Perform some actions...
)
shown.bs.popoverThis event is triggered when the Popover is visible to the user (the CSS transition effect will be awaited).
$('#mypopover').on('shown.bs.popover', function () {
　　//　Perform some actions...
)
hide.bs.popoverThis event is triggered immediately when the hide method is called.
$('#mypopover').on('hide.bs.popover', function () {
　　//　Perform some actions...
)
hidden.bs.popoverThis event is triggered when the tooltip is hidden from the user (the CSS transition effect will be awaited).
$('#mypopover').on('hidden.bs.popover', function () {
　　//　Perform some actions...
)

Online Example

The following example demonstrates the events of the Popover plugin:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Popover plugin events</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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="Left Popover some content —— show method">
		Left Popover
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$(function () { $('.popover-show').on('shown.bs.popover', function () {
		alert("Warning message when displayed");
	})});
</script>
</body>
</html>
Test and see ‹/›

The results are as shown below:

Bootstrap Alert BoxBootstrap Tooltip Plugin