tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。
属性
常用的功能，可以通过以下属性来设置：
data-toggle = "tooltip"
指明这是一个tooltip组件对象，其实可以省略
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不显//代码效果参考：http://hnjlyzjd.com/hw/wz_24393.html
示动画效果。data-container = {string | false}
默认值false，
当提示框用于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作用，（例如当触发弹出窗口时元素变宽和/或失去圆角）。
data-container = "body"
data-placement = {left | top | right | bottom | auto}
设置提示框的显示位置，支持多种设置，比如data-placement="auto left"时，提示窗尽可能显示在左边,在情况不允许的情况下它才显示在右边
简单的提示框HTML代码示例：
1 [/span>a href="#" id="text" data-toggle="tooltip" title="这是一段显示的文字" data-placement="right" data-trigger="hover"
2 [/span>script
3 $(function(){
4 $('【data-toggle="tooltip"】').tooltip(); // 也可以使用 $('#text').tooltip(); 来启用弹窗
5 });
6
支持HTML格式的提示框示例：
1 [/span>a href="#" id="text" data-toggle="tooltip" title="bootStrap4学习之路
漫漫长路，吾将上下求索之！
" data-html="true" data-placement="bottom" data-trigger="hover"
2
3 [/span>script
4 $(function(){
5 $('【data-toggle="tooltip"】').tooltip(); // 也可以使用 ('#text').tooltip(); 来启用提示框
6 });
7
方法
还可以通过tooltip的option设置来实现更多功能，tooltip函数原型：
1 $obj.tooltip({
2 title: '', // 提示框显示的文本内容。如果同时设置了属性的title，则优先属性title设置
3 placement: '【left | top | right | bottom】', // 等同于data-placement，级别优先于data-placement设置
4 html: 【true | false】, // 等同于data-html，级别优先于data-html设置
5 animation: 【true | false】, // 等同于data-animation，级别优先于data-animation设置
6
7 delay: 【数值】, // 等同于data-delay，级别优先于data-delay设置
8 // 也可以设置显示延迟 或 隐藏延迟，如下：
9 delay: {
10 show: 【数值】, // 显示延迟
11 hide: 【数值】 // 隐藏延迟
12 },
13
14 trigger: '【click | hover | focus | manual】', // 等同于data-trigger，级别优先于data-trigger设置
15
16 container: 【string | false】, // 等同于data-container,
17
18 selector: 【string | false】, // 选择器，设置某一对象下指定的元素为tooltip组件
19
20 template: 【string】 // 默认值：'[/span>div class="tooltip" role="tooltip"div class="arrow"
// 缺省下tooltip样式是黑底白字，可以通过这个属性自定义样式。
21 });
使含有rel="tooltip"的链接变成tooltip组件：
1 [/span>a href="#" rel="tooltip" title="这是一段提示文本"
2 [/span>script
3 $(function(){
4 $('a【rel="tooltip"】').tooltip({
5 trigger: 'hover',
6 delay: 300,
7 placement: 'bottom'
8 });
9 });
10
selector 选择器，设置某一对象下指定的元素为tooltip组件，演示代码：
1 [/span>div class="demo" data-trigger="hover"
2 [/span>a href="#" rel="tooltip" title="1111111111"
3 [/span>a href="#" rel="tooltip" title="2222222222"
4
5 [/span>a href="#" rel="tooltip" title="0000000"
6 [/span>script
7 $(function(){
8 $('.demo').tooltip({
9 selector: 'a【rel="tooltip"】'
10 });
11 });
12
注意：上例中data-trigger设置在了demo元素上面，如果设置在a标签上是无效的！
使用template，更改tooltip样式，演示代码：
1 [/span>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＜/span>: 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＜/span>: 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＜/span>: 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＜/span>: 0 0.4rem 0.4rem;
30 border-bottom-color: #ccc;
31
style="background-color: rgba(245, 245, 245, 1);
