tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

属性

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

简单的提示框HTML代码示例：

<a href="#" id="text" data-toggle="tooltip" title="这是一段显示的文字" data-placement="right" data-trigger="hover">右边显示内容</a>
<script>
    $(function(){
        $('[data-toggle="tooltip"]').tooltip(); // 也可以使用 $('#text').tooltip(); 来启用弹窗
    });
</script>

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

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

方法

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

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

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

<a href="#" rel="tooltip" title="这是一段提示文本">移上去</a>
<script>
$(function(){
    $('a[rel="tooltip"]').tooltip({
        trigger: 'hover',
        delay: 300,
        placement: 'bottom'
    });
});
</script>

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

<div class="demo" data-trigger="hover">
  <a href="#" rel="tooltip" title="1111111111">移上去</a>  
  <a href="#" rel="tooltip" title="2222222222">这里移上去也会显示</a>
</div>
<a href="#" rel="tooltip" title="0000000">这里移上去不会显示</a>
<script>
$(function(){
    $('.demo').tooltip({
        selector: 'a[rel="tooltip"]'
    });
});
</script>

注意：上例中data-trigger设置在了demo元素上面，如果设置在a标签上是无效的！

使用template，更改tooltip样式，演示代码：

<style>
/* 自定义tooltip的背景色及字体颜色 */
.define-tooltip-inner{
  background:#ccc;
  color: #000
}

/* 自定义tooltip四个不同方向箭头样式 */
.tooltip.bs-tooltip-top .define-tooltip-arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #ccc;
}

.tooltip.bs-tooltip-right .define-tooltip-arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #ccc;
}

.tooltip.bs-tooltip-left .define-tooltip-arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #ccc;
}

.tooltip.bs-tooltip-bottom .define-tooltip-arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #ccc;
}

</style>

<a href="#" id="hoverIt" rel="tooltip" title="这里样式改变了">移上2222去</a>
<script>
$(function(){
    $('#hoverIt').tooltip({
        trigger: 'hover',
        template: '<div class="tooltip" role="tooltip"><div class="arrow define-tooltip-arrow"></div><div class="tooltip-inner define-tooltip-inner"></div></div>'
    });
});

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

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

1) 调用显示提示框： $obj.tooltip('show'), 示例：

<a href="#" data-toggle="tooltip" title="自动弹出">自动弹出</a>
<script>
  $(function(){
    $('a[data-toggle="tooltip"]').tooltip('show');
  });
</script>

2) 调用关闭提示框：$obj.tooltip('hide')，示例：

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

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

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

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

事件

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