Bootstrap教程

Bootstrap - Popover插件

popover类似于工具提示，提供带有标题的扩展视图.要激活弹出框，用户只需将光标悬停在元素上.可以使用Bootstrap Data API完全填充popover的内容.此方法需要工具提示.

如果您想单独包含此插件功能，那么您将需要 popover.js 并且它具有工具提示插件.另外，如 Bootstrap插件概述一章所述，您可以包含 bootstrap.js 或缩小 bootstrap.min.js .

用法

popover插件按需生成内容和标记，默认情况下会弹出窗口触发后的元素.您可以通过以下两种方式添加popover :

通过数据属性 : 要添加弹出窗口，请将 data-toggle ="popover"添加到锚点/按钮标记.锚点的标题将是弹出窗口的文本.默认情况下，插件将popover设置为顶部.

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

通过JavaScript : 使用以下语法通过JavaScript启用弹出窗口 :

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

Popover插件不仅仅是-css插件，比如前面章节中讨论的下拉列表或其他插件.要使用此插件，您必须使用jquery(读取javascript)激活它.要启用页面上的所有弹出框，只需使用此脚本 :
$(function () { $("[data-toggle = 'popover']").popover(); });

示例

以下示例演示如何通过数据属性使用popover插件.

<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 = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

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

Options

某些选项可以通过Bootstrap Data API添加或通过JavaScript调用。下表列出了选项:

Option Name	Type/Default Value	Data attribute name	Description
animation	boolean Default − true	data-animation	Applies a CSS fade transition to the popover.
html	boolean Default − false	data-html	Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement	string\|function Default − top	data-placement	Specifies how to position the popover (i.e., top\|bottom\|left\|right\|auto). When auto is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
selector	string Default − false	data-selector	If a selector is provided, popover objects will be delegated to the specified targets.
title	string \| function Default − "	data-title	The title option is the default title value if the title attribute isn’t present.
trigger	string Default − 'hover focus'	data-trigger	Defines how the popover is triggered − click\| hover \| focus \| manual. You may pass multiple triggers; separate them with a space.
delay	number \| object Default − 0	data-delay	Delays showing and hiding the popover in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is − delay: { show: 500, hide: 100 }
container	string \| false Default − false	data-container	Appends the popover to a specific element. Example: container: 'body'

Methods

以下是一些有用的popover方法:

Method	Description	Example
Options − .popover(options)	Attaches a popover handler to an element collection.	$().popover(options)
Toggle − .popover('toggle')	Toggles an element's popover.	$('#element').popover('toggle')
Show − .popover('show')	Reveals an element's popover.	$('#element').popover('show')
Hide − .popover('hide')	Hides an element's popover.	$('#element').popover('hide')
Destroy − .popover('destroy')	Hides and destroys an element's popover.	$('#element').popover('destroy')

Example

以下示例演示了popover插件方法:

<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 = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </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>Some content in Popover-options method</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>

Events

下表列出了使用popover插件的事件.此事件可用于挂钩函数.

事件	描述	示例
show.bs.popover	调用show实例方法时会立即触发此事件.	$('＃mypopover').on('show.bs.popover'，function(){ //做点什么 })
shown.bs.popover	此事件在popover已经对用户可见(将等待CSS转换完成).	$('＃ mypopover').on('shown.bs.popover'，function(){ //做点什么 })
hide.bs.popover	当隐藏实例方法具有此事件时，会立即触发此事件被叫.	$('＃mypopover').on('hide.bs.popover'，function(){ //做点什么 })
hidden.bs.popover	当popover完成对用户的隐藏时将触发此事件(将等待CSS转换完成).	$('＃mypopover').on('hidden.bs.popover'，function(){ //做点什么 })

示例

以下示例演示Popover插件事件 :

<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 = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>