属性

常用的功能，可以通过以下属性来设置：

data-toggle = "popover" 指明这是一个popover组件对象，其实可以省略 title = "弹出框标题" 弹出框标题，可以忽略 data-trigger = "{click | hover | focus | manual}"

触发弹出框的方式：

1、click 【默认】单击时显示或关闭

2、hover 移上去显示，移出去隐藏

3、focus 单击时显示，点击空白处时隐藏

4、manual 手动模式。需要调用js代码触发显示或关闭弹出框

data-html = "{false | true}"

设置弹出框内容是否支持HTML格式。默认值:false

当值为true时，title属性值可以设置成html代码。不过建议不要这么设置，以防XSS攻击

data-delay = "{数值}" 设置弹出框延迟显示。比如 data-delay = "1000" 时，弹出框会在执行后1秒才显示。默认值：0 data-animation = {true | false} 是否动画效果显示弹出框。默认值 ：false不显示动画效果。 data-container = {string | false}

默认值false，

当弹出框用于按钮组、表单或表格时，必须指定选项容器：\'body\'以避免不必要的副作用，（例如当触发弹出窗口时元素变宽和/或失去圆角）。

data-container = "body"

data-placement = {left | top | right | bottom | auto} 设置弹出框的显示位置，支持多种设置，比如data-placement="auto left"时，弹出窗尽可能显示在左边,在情况不允许的情况下它才显示在右边

 

简单的弹出框HTML代码示例：

1 <a href="#" id="text" data-toggle="popover" title="标题" data-content="内容" data-placement="right" data-trigger="hover">右边显示内容</a>
2 <script>
3  $(function(){
4      $(\'[data-toggle="popover"]\').popover();
5  });
6 </script>

 

支持HTML格式的提示框示例：

1 <a href="#" id="text" data-toggle="popover" title="<h1>bootStrap4学习之路</h1><p>漫漫长路，吾将上下求索之！</p>" data-html="true" data-placement="bottom" data-trigger="hover">显示HTML样式弹出窗</a>
2 <script>
3   $(function(){
4     $(\'[data-toggle="popover"]\').popover(); 
5   });
6 </script>

 

方法

还可以通过popover的option设置来实现更多功能，popover函数原型： 

 1 $obj.popover({
 2   title: \'\', // 弹出框标题
 3   content: \'[string]\', // 弹出框内容
 4   placement: \'[left | top | right | bottom | auto]\', // 等同于data-placement
 5   html: [true | false], // 等同于data-html
 6   animation: [true | false], // 等同于data-animation
 7 
 8   delay: [数值], // 等同于data-delay
 9 
10   // 也可以设置显示延迟 或 隐藏延迟，如下：
11   delay: {
12     show: [数值], // 显示延迟
13     hide: [数值]  // 隐藏延迟
14   },
15 
16   trigger: \'[click | hover | focus | manual]\', // 等同于data-trigger
17 
18   container: [string | false], // 等同于data-container
19 
20   selector: [string | false], // 选择器，设置某一对象下指定的元素为tooltip组件
21 
22   template: [string] // 默认值：\'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>    
23                      // 可以通过这个属性自定义样式。
24 });

 

使含有rel="popover"的链接变成popover组件：

 1 <a href="#" rel="popover" title="标题" data-content="内容">移上去</a>
 2 <script>
 3   $(function(){
 4     $(\'a[rel="popover"]\').popover({
 5       trigger: \'hover\',
 6       delay: 300,
 7       placement: \'bottom\'
 8     });
 9   });
10 </script>

 

selector 选择器，设置某一对象下指定的元素为popover组件，演示代码：

 1 <div class="demo" data-trigger="hover">
 2   <a href="#" rel="popover" data-content="11111">移上去1</a>&nbsp;&nbsp;
 3   <a href="#" rel="popover" data-content="22222">移上去2</a>
 4 </div>
 5 <a href="#" rel="popover" data-content="0000000" data-trigger="hover">这里移上去不会显示</a>
 6  <script>
 7  $(function(){
 8      $(\'.demo\').popover({
 9          selector: \'a[rel="popover"]\'
10      });
11  });
12 </script>

注意：上例中data-trigger设置在了demo上面。设置在a标签上是无效的！

 

使用template自定义popover样式，演示代码：

 1 <style>
 2 /* 自定义popover包裹容器 */
 3 .define-popover {
 4   border-radius: 0px;
 5   border: 0px;
 6 }
 7 /* 自定义popover 内容区 */
 8 .define-popover-body{
 9   background: #F60;
10   color: #fff;
11   font-size: 12px;
12   border-radius: 0px;
13 }
14 /* 自定义popover 标题 */
15 .define-popover-title {
16   font-size: 12px;
17   background: #000;
18   color: #fff;
19   border-bottom: 0px; /* 隐藏标题下方的分割线 */
20   border-radius: 0px;
21 }
22 /* 自定义tooltip四个不同方向箭头样式 */
23 /* top */
24 .popover.bs-popover-top .define-popover-arrow::after {
25   border-top-color: #369; /* 箭头填充色 */
26 }
27 /* bottom */
28 .popover.bs-popover-bottom .define-popover-arrow::after {
29   border-bottom-color: #369; /* 箭头填充色 */
30 }
31 .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
32     border-bottom: 0px;
33 }
34 /* left */
35 .popover.bs-popover-left .define-popover-arrow::after {
36   border-left-color: #369; /* 箭头填充色 */
37 }
38 /* right */
39 .popover.bs-popover-right .define-popover-arrow::after {
40   border-right-color: #369; /* 箭头填充色 */
41 }
42 </style>
43  
44 <a href="#" id="hoverIt" rel="popover" title="这是标题" data-content="这是正文本内容" data-placement="right">改变弹出框样式</a>
45 <script>
46  $(function(){
47     $(\'#hoverIt\').popover({
48       trigger: \'hover\',
49       template: \'<div class="popover define-popover" role="tooltip">\' + \'<div class="arrow define-popover-arrow"></div>\' + \'<h3 class="popover-header define-popover-title"></h3>\' + \'<div class="popover-body define-popover-body"></div></div>\'
50     });
51   });
52 </script>  

注意：template 值中define-popover、define-popover-arrow、define-popover-title、define-popover-body这几个样式可以根据需要进行更改（其它部份不能更改），更改时要同步更改style内的样式。

 

在一些特殊情况下，需要调用程序触发tooltip时，bootstrap4也提供了一些接口： $obj.popover(\'show | hide | trigger | destroy\'),

1) 调用显示弹出框： $obj.popover(\'show\'), 示例：

1 <a href="#" data-toggle="popover" data-content="内容">弹出框</a>
2 <script>
3 $(function(){
4   $(\'a[data-toggle="popover"]\').popover(\'show\');
5 });
6 </script>

 注意：不要试图在隐藏元素上显示提示框！

 

2) 调用关闭弹出框：$obj.popover(\'hide\')，示例：

1 <a href="#" id="autoIt" data-toggle="popover" data-content="它会自动弹出，也会自动关闭">自动弹出，5秒后自动关闭</a>
2 <script>
3   $(function(){
4     $(\'#autoIt\').popover(\'show\');
5     setTimeout(function(){
6       $(\'#autoIt\').popover(\'hide\');
7     }, 5000);
8   });
9 </script>

 

3) 如果当前弹出框是显示的就让它关闭。否则让它显示：$obj.popover(\'trigger\')，示例：

 1 <!-- manual  开启手动触发模式 -->
 2 <a href="#" id="popover" data-toggle="tooltip" data-placement="top" data-trigger="manual" data-content="弹出关闭切换">手动触发模式</a>
 3 <button id="trigger-btn">弹出</button>
 4 <script>
 5   $(function(){
 6     $(\'#trigger-btn\').click(function(){
 7       $(this).text()==\'弹出\' ? 
 8       $(this).text(\'关闭\') :
 9       $(this).text(\'弹出\');
10       $(\'#popover\').popover(\'toggle\');
11     });
12   });
13 </script>

 

4) 销除tooltip组件, $obj.tooltip(\'destroy\'); 【好像bootstrap4中，已不存在接口】

 

事件

tooltip含有四种事件，执行顺序如下： 

show.bs.popover

$obj.on(\'show.bs.popover\', function () {
// 显示时执行
})

inserted.bs.popover

$obj.on(\'inserted.bs.popover\', function () {
// 数据内容插入完成时执行
})

shown.bs.popover

$obj.on(\'shown.bs.popover\', function () {
// 完全显示后执行
})

hide.bs.popover

$obj.on(\'hide.bs.popover\', function () {
// 隐藏时执行
})

hidden.bs.popover

$obj.on(\'hidden.bs.popover\', function () {
// 完全隐藏后执行
})