属性
常用的功能，可以通过以下属性来设置：
| 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-title"></h3><div class="popover-content"></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，更改tooltip样式，演示代码：
1 <style>
2 /* 自定义tooltip的背景色及字体颜色 */
3 .define-tooltip-inner{
4 background:#ccc;
5 color: #000
6 }
7
8 /* 自定义tooltip四个不同方向箭头样式 */
9 .tooltip.bs-tooltip-top .define-tooltip-arrow::before { 10 top: 0; 11 border-width: 0.4rem 0.4rem 0; 12 border-top-color: #ccc; 13 } 14 15 .tooltip.bs-tooltip-right .define-tooltip-arrow::before { 16 right: 0; 17 border-width: 0.4rem 0.4rem 0.4rem 0; 18 border-right-color: #ccc; 19 } 20 21 .tooltip.bs-tooltip-left .define-tooltip-arrow::before { 22 left: 0; 23 border-width: 0.4rem 0 0.4rem 0.4rem; 24 border-left-color: #ccc; 25 } 26 27 .tooltip.bs-tooltip-bottom .define-tooltip-arrow::before { 28 bottom: 0; 29 border-width: 0 0.4rem 0.4rem; 30 border-bottom-color: #ccc; 31 } 32 33 </style> 34 35 <a href="#" id="hoverIt" rel="tooltip" title="这里样式改变了">移上2222去</a> 36 <script> 37 $(function(){ 38 $('#hoverIt').tooltip({ 39 trigger: 'hover', 40 template: '<div class="tooltip" role="tooltip"><div class="arrow define-tooltip-arrow"></div><div class="tooltip-inner define-tooltip-inner"></div></div>' 41 }); 42 });
注意：template 值中define-tooltip-arrow、define-tooltip-inner这二个样式可以根据需要进行更改（其它部份不能更改），更改时要同步更改style内的样式。
在一些特殊情况下，需要调用程序触发tooltip时，bootstrap4也提供了一些接口： $obj.tooltip('show | hide | trigger | destroy'),
1) 调用显示提示框： $obj.tooltip('show'), 示例：
1 <a href="#" data-toggle="tooltip" title="自动弹出">自动弹出</a>
2 <script>
3 $(function(){
4 $('a[data-toggle="tooltip"]').tooltip('show'); 5 }); 6 </script>
注意：不要试图在隐藏元素上显示提示框！
2) 调用关闭提示框：$obj.tooltip('hide')，示例：
1 <a href="#" id="autoIt" data-toggle="tooltip" title="它会自动弹出，也会自动关闭">自动弹出，5秒后自动关闭</a>
2 <script>
3 $(function(){
4 $('#autoIt').tooltip('show'); 5 setTimeout(function(){ 6 $('#autoIt').tooltip('hide'); 7 }, 5000); 8 }); 9 </script>
3) 如果当前提示框是显示的就让它关闭。否则让它显示：$obj.tooltip('trigger')，示例：
1 <!-- manual 开启手动触发模式 -->
2 <a href="#" id="tooltip" data-toggle="tooltip" data-trigger="manual" title="弹出关闭切换">手动触发模式</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 $('#tooltip').tooltip('toggle'); 11 }); 12 }); 13 </script>
4) 销除tooltip组件, $obj.tooltip('destroy'); 【好像bootstrap4中，已不存在接口】
事件
tooltip含有四种事件，执行顺序如下：
| show.bs.tooltip |
$obj.on('show.bs.tooltip', function () { |
| inserted.bs.tooltip |
$obj.on('inserted.bs.tooltip', function () { |
| shown.bs.tooltip |
$obj.on('shown.bs.tooltip', function () { |
| hide.bs.tooltip |
$obj.on('hide.bs.tooltip', function () { |
| hidden.bs.tooltip | $obj.on('hidden.bs.tooltip', function () { |