Popover 插件（Popover Plugin）

优质

小牛编辑

127浏览

2023-12-01

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

如果你想单独包含这个插件功能，那么你将需要popover.js并且它具有tooltip plugin的依赖性。另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法 (Usage)

popover插件按需生成内容和标记，默认情况下会在其触发元素后面设置popover。您可以通过以下两种方式添加popover -

Via data attributes - 要添加弹出窗口，请将data-toggle = "popover"到锚点/按钮标记。锚点的标题将是弹出窗口的文本。默认情况下，插件将popover设置为top。

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

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

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

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

例子 (Example)

以下示例演示了如何通过数据属性使用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调用。下表列出了选项 -

选项名称	类型/默认值	数据属性名称	描述
animation	boolean Default − true	data-animation	将CSS淡入淡出过渡应用于弹出窗口。
html	boolean Default − false	data-html	将HTML插入到弹出窗口中。如果为false，则使用jQuery的文本方法将内容插入到dom中。如果您担心XSS攻击，请使用文本。
placement	string \| function Default − top	data-placement	指定如何定位弹出窗口（即top \| bottom \| left \| right \| auto）。指定auto ，它将动态重定向弹出窗口。例如，如果展示位置为“自动离开”，则弹出窗口将尽可能显示在左侧，否则它将显示为右侧。
selector	string Default − false	data-selector	如果提供了选择器，则会将弹出框对象委派给指定的目标。
title	字符串\| 功能Default − "	data-title	如果title属性不存在，则title选项是默认标题值。
trigger	字符串Default − 'hover focus'	data-trigger	定义弹出窗口的触发方式 - click\| hover \| focus \| manual click\| hover \| focus \| manual click\| hover \| focus \| manual 。你可以传递多个触发器; 用空格隔开它们。
delay	号码\| 对象Default − 0	data-delay	以毫秒显示和隐藏弹出窗口的延迟 - 不适用于手动触发类型。如果提供了数字，则延迟将应用于隐藏/显示。对象结构是 - `delay: { show: 500, hide: 100 }`
container	字符串\| false Default − false	data-container	将popover追加到特定元素。示例:container:'body'

方法 (Methods)

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

方法	描述	例
Options - .popover（选项）	将弹出处理程序附加到元素集合。	`$().popover(options)`
Toggle - .popover（'切换'）	切换元素的弹出窗口。	`$('#element').popover('toggle')`
Show - .popover（'show'）	显示元素的弹出窗口。	`$('#element').popover('show')`
Hide - .popover（'隐藏'）	隐藏元素的弹出窗口。	`$('#element').popover('hide')`
Destroy - .popover（'destroy'）	隐藏和摧毁元素的弹出窗口。	`$('#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 () { // do something })`
shown.bs.popover	当弹出窗口对用户可见时将触发此事件（将等待CSS过渡完成）。	`$('#mypopover').on('shown.bs.popover', function () { // do something })`
hide.bs.popover	调用hide实例方法时会立即触发此事件。	`$('#mypopover').on('hide.bs.popover', function () { // do something })`
hidden.bs.popover	当弹出窗口完成对用户的隐藏时将触发此事件（将等待CSS转换完成）。	`$('#mypopover').on('hidden.bs.popover', function () { // do something })`

例子 (Example)

以下示例演示了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>