Bootstrap popup box


Bootstrap Popover plug-in

The popover is similar to the tooltip and provides an expanded view. To activate the popover, users simply hover over the element. The content of the popup box can be filled entirely using the Bootstrap Data API. This method relies on tooltips.

If you want to reference the functionality of this plugin separately, then you need to reference popover.js, which depends on the Tooltip plugin. Alternatively, as mentioned in the Bootstrap plugin overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.

Usage

The popover plug-in generates content and markup according to requirements. By default, popovers are placed behind their triggering elements. You can add a popover in the following two ways:

  • Through the data attribute: To add a popover, just add a Just add data-toggle="popover" to the anchor/button tag. The title of the anchor is the text of the popover. By default, the plugin places the popover at the top.

##<a href="#" data-toggle="popover" title="Example popover">
Please hover over mine
</a>
  • ## Via JavaScript:

    Enable popover via JavaScript:

$('#identifier').popover(options)
The popover plug-in is not a pure CSS plug-in like the drop-down menu and other plug-ins discussed before. To use the plugin, you must activate it using jquery (read 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 plug-in through the data attribute.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run instance »
Click the "Run instance" button to view the online instance

Options

There are some options added through the Bootstrap Data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:

Option NameType/Default ValueData Property Name Description
animationboolean
Default value: true		data-animation towards The popup box applies a CSS fade transition effect.
htmlboolean
Default value: false		data-htmlTo pop up box to insert HTML. If false, jQuery's text method will be used to insert content into the dom. If you are concerned about XSS attacks, use text.
placementstring|function
Default value: top		data-placement Specifies how to position the pop-up box (i.e. top|bottom|left|right|auto).
When specified as auto, the pop-up box will be dynamically adjusted. For example, if placement is "auto left", the popup will be displayed on the left if possible, and it will be displayed on the right if the situation does not allow it.
selectorstring
Default value: false		data-selectorif provided If a selector is specified, the popup object will be delegated to the specified target.
titlestring | function
Default value: ''		data-titleIf the title attribute is not specified, the title option 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, each separated by a space.
delaynumber | object
Default value: 0		data-delay The number of milliseconds to delay showing and hiding the popup - not applicable to manual trigger type. If a number is provided, the delay will be applied to showing and hiding. If an object is provided, the structure looks like this: 
delay:
{ show: 500, hide: 100 }
containerstring | false
Default value: false		 data-containerAppend a popup box to the specified element.
Example: container: 'body'

Methods

The following are some useful methods in popover plug-ins:

MethodDescription Example
Options: .popover(options)Append the popover handle to the element collection. 
$().popover(options)
Toggle: .popover('toggle') Toggles the display/hiding of the element's pop-up box. 
$('#element').popover('toggle')
Show: .popover('show') Display the popover box of the element. 
$('#element').popover('show')
Hide: .popover('hide')Hide the popover of the element. 
$('#element').popover('hide')
Destroy: .popover('destroy')Hides and destroys the popover box of the element. 
$('#element').popover('destroy')

Example

The following example demonstrates the popover plug-in method:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Event

The following table lists the events used in the pop-up box (Popover) plug-in. These events can be used as hooks in functions.

EventDescriptionInstance
show.bs.popover This event is triggered immediately when the show instance method is called. 
$('#mypopover').on('show.bs.popover', function () {
  // 执行一些动作...
})
shown.bs.popoverThis event is triggered when the popover becomes visible to the user (will wait for the CSS transition effect to complete). 
$('#mypopover').on('shown.bs.popover', function () {
  // 执行一些动作...
})
hide.bs.popoverThis event is triggered immediately when the hide instance method is called. 
$('#mypopover').on('hide.bs.popover', function () {
  // 执行一些动作...
})
hidden.bs.popoverThis event is fired when the tooltip is hidden from the user (will wait for the CSS transition effect to complete). 
$('#mypopover').on('hidden.bs.popover', function () {
  // 执行一些动作...
})

Example

The following example demonstrates the events of the pop-up box (Popover) plug-in:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 弹出框（Popover）插件事件</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/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="左侧的 Popover 中的一些内容 —— show 方法">
      左侧的 Popover
   </button>

   </div>
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("当显示时警告消息");
   })});
   </script>
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

←
→