【详解】弹出框（popover）的使用 - bootStrap4常用CSS笔记
属性
常用的功能，可以通过以下属性来设置：
| 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> 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 () {
|
