属性

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

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

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

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

方法

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

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

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

<a href="#" rel="popover" title="标题" data-content="内容">移上去</a>
<script>
  $(function(){
    $('a[rel="popover"]').popover({
      trigger: 'hover',
      delay: 300,
      placement: 'bottom'
    });
  });
</script>

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

<div class="demo" data-trigger="hover">
  <a href="#" rel="popover" data-content="11111">移上去1</a>  
  <a href="#" rel="popover" data-content="22222">移上去2</a>
</div>
<a href="#" rel="popover" data-content="0000000" data-trigger="hover">这里移上去不会显示</a>
 <script>
 $(function(){
     $('.demo').popover({
         selector: 'a[rel="popover"]'
     });
 });
</script>

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

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

<a href="#" id="hoverIt" rel="popover" title="这是标题" data-content="这是正文本内容" data-placement="right">改变弹出框样式</a>
<script>
 $(function(){
    $('#hoverIt').popover({
      trigger: 'hover',
      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>'
    });
  });
</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'), 示例：

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

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

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

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

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

<!-- manual  开启手动触发模式 -->
<a href="#" id="popover" data-toggle="tooltip" data-placement="top" data-trigger="manual" data-content="弹出关闭切换">手动触发模式</a>
<button id="trigger-btn">弹出</button>
<script>
  $(function(){
    $('#trigger-btn').click(function(){
      $(this).text()=='弹出' ?
      $(this).text('关闭') :
      $(this).text('弹出');
      $('#popover').popover('toggle');
    });
  });
</script>

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

事件

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